Proper way to handle marquees now?

Question

Since the marquee HTML tag is obsolete, I was wondering, what is the proper way of doing this now? I've seen many jQuery and Javascript snippets that achieve the same task, but I was hoping there was a new "standard" in marquees, so to speak.

I've seen CSS snippets that are something like:

overflow-style: marquee-line;
marquee-style: line;

But they don't seem to work in all browsers (or any in some cases). I know it's seen as a "90's" themed idea, but there are a few purposes that still require it and my Income Ticker on my website really needs to be scrolling to maximize content per available pixels.

CSS animation. This may help http://jsfiddle.net/jonathansampson/xxuxd/ or just google CSS marquee — GillesC, Jul 25 '15 at 21:54
http://stackoverflow.com/questions/21233033/css3-marquee-effect check this — Amr Elgarhy, Jul 25 '15 at 21:56

Madness · Answer 1 · 2015-07-25T22:16:07.193

There is no "standard" way, that would be an HTML tag like we had before that needed no styling. But at the end of the day, it is better this way. We have control over all aspects of each object we intend to display rather than always relying on defaults. This is better for overall user experience, and not quite in the scope of StackOverflow, but marquees in general already fall outside of the scope of good user experience in most cases.

If you would like to dig into it more though, there are some cross browser differences you should pay attention for, and you may need to tweak the width and indents to fit your needs, but this should get you going:

<div class="marquee">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

.marquee {
    width: 300px;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 50s linear infinite;
}

@keyframes marquee {
    0%   { text-indent: 27.5em }
    100% { text-indent: -105em }
}

http://jsfiddle.net/7k5g3hco/

Proper way to handle marquees now?

1 Answers1