marquee-direction
jQuery marquee effect that can change direction
Options
- speed Value 1 = 1px scroll per second. It must be positive.
- direction
vertical
orhorizontal
Events
- forward Starts scrolling down for vertical and scrolling rightwards for horizontal.
- backward Starts scrolling up for vertical and leftwards for horizontal.
- pause Stops and scrolling
- revalidate Recaclculate if text overflows or not and apply/remove marquee as needed.
Example:
html markup:
<div class="marquee marquee-vertical" data-speed="100" data-direction="vertical"> <div class="marquee-wrapper"> <div class="marquee-content"> Some long text... </div> </div> </div> <div class="marquee marquee-horizontal " data-speed="50" data-direction="horizontal"> <div class="marquee-wrapper"> <div class="marquee-content"> Some long text here... </div> </div> </div>
css:
.marquee-vertical { height: 200px; overflow: auto; } .marquee-content { margin: 0; padding: 30px; } .marquee { overflow: auto; padding: 0; margin: 15px 0; } .marquee-horizontal { white-space: nowrap; } .marquee-horizontal .marquee-content, .marquee-horizontal .marquee-wrapper { display: inline-block; }
js:
$(".marquee").marquee(); //initialization $(".marquee").marquee({ speed: 100, direction: horizontal }); //initialization with custom speed and direction $(".marquee").trigger("forward"); // triggers forward event $(".marquee").eq(0).trigger("forward", {speed: 50}); // Custom speed $(".marquee").trigger("revalidate"); //E.g. if on window.resize text doesn't overflow you might want to disable marquee
Note
.marquee
and .marquee-wrapper
must have no padding. Any padding can be applied to either .marquee-content
or you may wrap .marquee
in another container.
data-* API
The plugin supports data-* attributes. If both data-* and settings
are passed in javscript initialization then data-* values will override the later.
Pending
toggle
Toggle event like forward and backward would be useful
marquee_overflow_setInterval
Marquee effect acheived with native setInterval by incrementing/decrementing scrollTop
/scrollLeft
with setInterval. data-* plugin initialaztion also added. Since setInterval doesn't fire earlier than 10ms so the practical speed limit with this method is 1px to 10ppx per second. This could be incresed by decreasing the fram rate, i.e. increasing scrollTop/left in more than 1px steps. But jquery animate natively takes care of this. So better use marquee-animate-toggle above file.
marquee_translate_transition
Marquee effect to be acheived with transtion property over translate
so as to use native css transition with gpu acceleration. This file doesn't work yet. Problem is with unneccessary delay required -- Pending.
The problem is solved now. And the next version of the plugin will support css3 transitions. :-)
- Other pending feature is trying using css3
animations
. Currently I have not found any way to toggle animations amidst.