Need Help with Creating a Rotating Advertisement Stripe on My Website
i'm trying to create a rotating advertisement stripe for my website, but I'm having trouble getting it to work as intended. I've set up a CodePen with my current code. Could someone with CSS expertise take a look and help me complete it?
Here is the link to my CodePen: https://codepen.io/deepk2891/pen/RwzoBKQ?editors=1100
i have provided image what I'm aiming to achieve in codepen output.
i wanna put stars like * in between all the words but with same distance on both the sides
stripe is starting from left, user can not wait until it covers the full screen so i wanna do it start with full screen and rotate constantly
I'd greatly appreciate any tips, corrections, or suggestions!
Thank you!
5 Replies
Stop reposting this please. You can push it back to the top by sending a message in the thread rather than remaking the entire post, but also please don't do that too much. Keep in mind that it's Sunday and most people on the server are busy with the rest of their lives, so it might be a while before you get a proper response. It could be a day or more, and also could just be not at all, everyone volunteers their time
can someone solve this issue
stripe is starting from left, user can not wait until it covers the full screen so i wanna do it start with full screen and rotate constantlyI presume that what you are trying to say is that the text should already be visible and scrolling on load rather than being initially empty before the items scroll in. If so you could change your animation delay to this: the "-1" at the end will basically adjust it so that the animation has already started by giving it a negative delay. Adding the * between the items is more complicated. That is to say, adding it is simple enough (eg. with a pseudo element), the issue is how to space them evenly. Ideally you would just use flex on the parent container and the spacers could be spaced in the middle easily. However due to the way that you are animating this, based on placing the items with position absolute, this gets trickier. Whilst you have given each of them the same fixed width, the length of each text is not the same so the visual spaces are not the same so, even if you placed the * in an equal position between the blocks, the spacing won't look the same. I played around with the earlier to try to find a solution to this issue but wasn't able to come up with something decent without a potential complete re-write. I would be tempted to place the texts in their own boxes (with borders or backgrounds which would define the equal spaces better than different length texts but of course that may well not fit your design. For reference this is my version where I added the boxes just to prove visually that the * were centered https://codepen.io/cbolson/pen/LYKxPwZ
Hi Chris,
Thank you so much for your detailed response and for taking the time to experiment with the animation delay and the layout. Your suggestions on the animation delay adjustment are really helpful, and I’ll definitely try incorporating that into my code.
I never thought about a negative delay. Innovative ! 🤩