Add marquee effect over image

What I'd like to achieve: https://bennadel-cdn.com/resources/uploads/2023/[email protected] Attempt so far: https://codepen.io/n00bCod3r/pen/gOjNvge Where the left and right border are the image's ones (with the whole title being shown and scrolling)
20 Replies
ἔρως
ἔρως2mo ago
you can use the deprecated <marquee> tag it's very ancient, but still works it's not exactly like that, but it is close enough-ish
MC23
MC232mo ago
That looks dope
ἔρως
ἔρως2mo ago
*looked it's a deprecated tag it shouldn't be used in new projects to do exactly what you want, witht he text showing from the other side, you will need to use 2 pseudo-elements and animate one to show after the other i don't think the marquee can do that
dys 🐙
dys 🐙2mo ago
This works, but requires tweaking based on the number of characters in the title. It uses:
@keyframes scroll {
from { text-indent: 10ch }
to { text-indent: -25ch }
}
@keyframes scroll {
from { text-indent: 10ch }
to { text-indent: -25ch }
}
There is likely a solution that uses div being translated inside another with overflow: hidden that would work regardless of the title's width.
ἔρως
ἔρως2mo ago
it gets stuck on "deadpoo" for a while
ἔρως
ἔρως2mo ago
it's like this for a while, then carries on
No description
MC23
MC232mo ago
The marquee works just fine with start/stop logic and change of speed. Also this is a script I'm making for myself for a website I use, so I don't mind using deprecated stuff
ἔρως
ἔρως2mo ago
for this type of stuff, i wouldn't mind it either but im just making sure you're aware that this tag may stop working at any moment even right now
MC23
MC232mo ago
Yeah, I already have an alternative but I don't like it
ἔρως
ἔρως2mo ago
what's the alternative?
MC23
MC232mo ago
No description
ἔρως
ἔρως2mo ago
that's so ugly it hurts there's another alternative
MC23
MC232mo ago
Yeah I don't want popups on hover
ἔρως
ἔρως2mo ago
instead of 12, have 6 and put the year on the right side, next to the number of stars and then, for the names, you can truncate to 2 lines, and add a title
MC23
MC232mo ago
Idk this is how the site gives me the movies But I can do the year one
ἔρως
ἔρως2mo ago
what do you mean?
MC23
MC232mo ago
I have few control on the number of elements in a row It depends on the page I am
ἔρως
ἔρως2mo ago
then the marquee makes sense
MC23
MC232mo ago
Yeah that works fine and when it stops working I just have the ugly backup solution
ἔρως
ἔρως2mo ago
the most important is that it still works
Want results from more Discord servers?
Add your server