jQuery Marquee Plugin with CSS3 Support
Recently I been working on a project where a static text message needs to be animated similar to non-standard HTML marquee tag.
Googling gives me quite few jQuery plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple jQuery plugin which can scroll the text either left, right, up or down.
I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options:
Here is the list of some examples. You can open each pen below in new window and play around it. Also you can click HTML, CSS or JS tab to see the relevant code.
Basic example with default options
First include the plugin.
Content inside the main wrapper can have html.
<div class="marquee">jQuery marquee is the best <b>marquee</b> plugin in the world</div>
border: 1px solid #ccc;
Starting plugin with options
Using options as data attributes
Mixing data attributes and JS options
Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes.
CSS3 vs jQuery
On hover pause the marquee. If browser supports CSS3 and allowCss3Support is set to true than it will be done using CSS3. Otherwise this will be done using jQuery plugin https://github.com/tobia/Pause (check this example for how details).
resumeOnHover (the other way around)
Question on github: “There is some way to do the opposite of “pauseOnHover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”
Pause & Resume methods
Change marquee with ajax content
Due to no ‘Access-Control-Allow-Origin’ issue, please click here to open pen in new window to see it in action.
Start marquee with element being visible
A lot of people are asking about this issue. The marquee starts from hidden and scroll into view. There is no built-in way to start marquee from its default position at the moment. Although you can try something like this http://jsfiddle.net/4QYJQ/114/.
Help me by reporting any bugs in the comments section below or github. Also if you have an idea to improve the plugin please do let me know in comments below.