moving text offscreen wrapping back from other side

Im trying to move text to the left then wrap it to come from the right as it is going to the left
13 Replies
Chris Bolson
Chris Bolson15mo ago
Are referring to a marquee effect? You will probably have to either create the text more than once or, if you don't want to create duplicate markup or text, you could use a data attribute and add it using a pseudo element. I created something similar using CSS only some time ago that might be of some help https://codepen.io/cbolson/pen/dygaBRL
kimonyrfr
kimonyrfr15mo ago
Oh thank you so much @Chris sorry for tagging but is there anyway i can modify the data attribute with css also my boundaries are all messed up i want it to come from the screen but anything i do wont work
Jochem
Jochem15mo ago
you can't change the data-attribute's contents with CSS, you'd need to use javascript or just of course manually edit the HTML also, if you share your code, Chris (or anyone else that's around) can take a look at what your problem is and how to fix it @haberno
kimonyrfr
kimonyrfr15mo ago
@jochemm Alright imma share the code im pretty new to this i started like a week ago so my code is probably really bad I figured out how to apply the properties to the data attributes but i just have value problems right now html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>My website</title>
</head>
<body>
<nav>
<div class="nav-container">
<p class="name">
<span class="letter">T</span><span class="letter">I</span
><span class="letter">R</span><span class="letter">T</span
><span class="letter">H</span>&nbsp;
<span class="letter">P</span><span class="letter">A</span
><span class="letter">T</span><span class="letter">E</span
><span class="letter">L</span>
</p>
<img class="logo" src="./public/pjjkTX01.svg" alt="Logo" />
</div>
</nav>
<section class="intro">
<div class="name-container" data-text="NAME NAME">
<h1 class="intro-name">NAME NAME</h1>
</div>
</section>
<section class="about"></section>
<section class="experience"></section>
<section class="projects"></section>
<footer>
Built and Designed by Tirth Patel<br /><br />All rights reserved. ©
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>My website</title>
</head>
<body>
<nav>
<div class="nav-container">
<p class="name">
<span class="letter">T</span><span class="letter">I</span
><span class="letter">R</span><span class="letter">T</span
><span class="letter">H</span>&nbsp;
<span class="letter">P</span><span class="letter">A</span
><span class="letter">T</span><span class="letter">E</span
><span class="letter">L</span>
</p>
<img class="logo" src="./public/pjjkTX01.svg" alt="Logo" />
</div>
</nav>
<section class="intro">
<div class="name-container" data-text="NAME NAME">
<h1 class="intro-name">NAME NAME</h1>
</div>
</section>
<section class="about"></section>
<section class="experience"></section>
<section class="projects"></section>
<footer>
Built and Designed by Tirth Patel<br /><br />All rights reserved. ©
</footer>
</body>
</html>
kimonyrfr
kimonyrfr15mo ago
the css was too big so i sent it as file
kimonyrfr
kimonyrfr15mo ago
kimonyrfr
kimonyrfr15mo ago
The round of animation is fine but then the second it chops and teleports
Jochem
Jochem15mo ago
that's part of why codepen is so nice, you can put the code there regardless of how long it is, and see the live example on the same page: https://codepen.io/jochemm/pen/oNQrEvZ
kimonyrfr
kimonyrfr15mo ago
oh u already set it up thank you but do you see what problem that im having
Jochem
Jochem15mo ago
Hm, I do see the issue, but I don't know the solution off the top of my head. I'll see if I can take another look if Chris doesn't know later.
Chris Bolson
Chris Bolson15mo ago
My code was really just a demo and the solution relied on having a fixed width container. From that it was possible to calculate the speed and delay. In your case it is somewhat more difficult as your container width will depend on the screen width. I also get the impression that want you want is to continually show the text without any spacing or delay I think that you will probably need to go with JavaScript for this.
Disco
Disco15mo ago
Just hop in a time machine, go back to 1999 and use <marquee>
Want results from more Discord servers?
Add your server