plumarquee

a responsive marquee jquery plugin

<marquee> </marquee>

Rest in peace, little element tag. You're dead to standards-conscious developers now.

Every once in awhile, though, there is still some use for the glorious, never-ending text scroll that is the marquee. But we do not need to resort to deprecated tags. We can make the marquee better. Faster (or slower). More responsive.

Enter plumarquee. Implementation is simple:

  1. Pick what you want to animate. <p>I want to animate this</p>
  2. Wrap your target in an outer element with a unique identifier. <div id="marquee"><p>I want to animate this</p></div>
  3. Load your favorite jquery library. <script src="js/jquery.min.js"></script>
    </body>
  4. Load plumarquee and call the marquee function. <script src="js/jquery.min.js"></script>
    <script src="js/plumarquee.min.js"></script>
    <script>
    $('#marquee').plumarquee('left', 75);
    </script>
    </body>

Parameters:

What's with that wonky measurement?

It's Maths. Normal jQuery animations are timed off of duration - how long it takes to get from point A to point B. If the distance between point A and point B is constantly changing, then the speed of the animation also varies. Which means elements in relatively-sized containers on small screens will animate in slow motion, while those on large screens will zip by.

Plumarquee takes a different approach. Set the speed for your animation, and Internet Magic®* will keep your marquee scrolling at the same pace, regardless of screen size. The pixels/second measure may be a bit odd, but it's not all that complicated. Larger numbers speed up the marquee, smaller values slow it down.

Examples