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
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
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
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
@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
the css was too big so i sent it as file
The round of animation is fine but then the second it chops and teleports
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
oh u already set it up thank you
but do you see what problem that im having
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.
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.
Just hop in a time machine, go back to 1999 and use
<marquee>