Marquee Module


Via data attributes

To easily add marquee behavior to any element, just add data-spy="marquee" to the element you want to use as a marquee. You can use data-option to specify options for the marquee.

<div data-spy="marquee" data-life="2">...</div>

Heads up! Elements that are immediately positioned under the marquee element will be used to create the marquee messages. During creation, the marquee element is emptied and the messages are created using data attribute options of those elements.

Via JavaScript

Call the marquee plugin via JavaScript:

    anim: "scroll", duration: 1, life: 2.5,
    messages: [...]


Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-duration="2".

Marquee Options

autostartbooleantrueAutomatically start the Marquee after loading. Mostly useful when initially creating the Marquee. This can be overwritten by passing the boolean value directly to the load method.
blendbooleanfalseAnimation of the messages are simultaneous. Otherwise, the next message is animated in at the end of the current message's animation out.
Marquee also accepts all options available for Messages. These options will be applied to every Message created unless overwritten by passing the option to the Message directly.

Message Options

animstringfadeThe animation to use when transitioning the message in and out. See below for creating custom animations.
classNamestringThe CSS class to apply to the message.
durationnumber1The number of seconds the animation should last. This can be a float or integer.
lifenumber2The length of time a message should remain visible.
linkstringThe URL link associated with the message. Links created using this method will open in the current page.


.marquee(method, args)

addstring | objectAdd a new message and its options to the display queue.
clearClear the marquee display. Messages remain in the display queue.
emptyClears the marquee display and removes all messages from the display queue.
loadarray, booleanLoad a list of messages and their options to be displayed in a container. Clears existing messages from the display queue. The optional boolean argument allows the Marquee to automatically start.
removenumberRemoves a message from the display queue using a passed index. If you are attempting to remove the current message, the marquee displays the next message first, then deletes the current.
startnumberStart the marquee displaying messages. Optional index allows specific message to be displayed when starting the display queue.
stopbooleanStop the marquee from displaying messages. The optional boolean argument quiet tells Marquee whether to suppress the stop event. True suppresses the stop event.
firstDisplays the first message in the display queue.
lastDisplays the last message in the display queue.
nextDisplays the next message in the display queue. If the last message is being displayed then the first message is displayed.
previousDisplays the previous message in the display queue. If the first message is being displayed then the last message is displayed.
first, last, next, previous will not work while the messages are transitioning from one to another.


Events are applied to the Marquee element, not on individual messages.

loadedtriggered when finished loading messages.
changedtriggered when finished transitioning from one message to another.
aftertriggered after transitioning a message out.
beforetriggered before transitioning a message in.


Marquee has three predefined animations.

fadeFades the message in and out.
scrollScrolls the message from bottom to top.
slideSlides the message from right to left.


via Markup

Browse the web with the power of Google!
Searching just got faster...
...and safer.

via Javascript

using Methods

Javascript Frameworks

using Events


Nighttime display of the Memphis/Arkansas Bridge.