Infinite Scroll text behind and infront of a image
I am trying to achive this section where a text scroll like marquee behind the image and another text scroll in front of that image. I tried positioning it with z-index but not working as I wanted. I am using tailwindcss for styling
10 Replies
Do you have a link to the live project?
and z-index will only work in a flex or grid container or if there is a position other than
static (e.g. position: relative) on it.No, I cleared all the code
am trying to do again from the scratch, so if you have any idea how do you approach this design like how many div tags or something
Start a codepen with what you have and what you're trying and then link it in this thread
Sorry for the delayed reply , https://codepen.io/ahmd_shajmeer/pen/QwLMYMJ , I worked on this but how to achieve the infinite scroll effect on this , as you can see in the codepen the text starts from position, so instead of that I want to remove that start or end , just scroll all time.
Im not clear what youre saying. the text starts from position (?) and you want to remove the start or end (?) ??
Do you have an example of what you are trying to emulate?
right, i get the infinite scroll part but as far as the text positioning, im not understanding what youre saying.
This example has a jump at 0:03 and it goes > right, but yours looks like you want it to go < left
Kevin Powell
YouTube
Create an infinite horizontal scroll animation
🎓 Did you know I have courses? Both free and premium ones: https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=infinitescroll
Infinite scroll animations for things like logos are relatively common these days, but there is a lot that we can do incorrectly when making one, so I decided to try and make one that respec...
I have achieved similar scroll effect using only tailwindcss but it is not in a loop, so I tried a trick from YT that dupicating the content but it also not working. Is it possible achieve that without any JS.