marquee is a tiny jQuery plugin that means that you can implement infinite horizontal or vertical scrolling for HTML lists.
Preferrred for displaying in depth information akin to breaking information, inventory quotes, and product photographs, this plugin permits content material to maneuver fluidly throughout the display screen in 4 doable instructions: left, proper, up, and down.
The best way to use it:
1. Add the jquery.marquee.min.js script to the web page after you have loaded the most recent jQuery library.
<script src="jquery.min.js"></script> <script src="jquery.marquee.min.js"></script>
2. Apply the marquee.js to an HTML listing by calling the marquee perform:
<div class="marquee-wrapper" id="instance">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
... extra gadgets right here ...
</ul>
</div>
$(perform(){
$("#instance").marquee();
});
3. Customise the scrolling habits with these choices:
$("#instance").marquee({
// 'left', 'proper', 'up', 'down'
path: 'left',
// Decrease worth = quicker scroll
pace: 20,
// Steady scrolling
loop: true,
// Pause on mouse hover
pausehover: false,
// Spacing between gadgets
spaceBetween: 10
});
The way it works:
marquee.js works by cloning the unique content material and appending it to create a steady circulate. It makes use of JavaScript to control the scroll place of the container component. The scrolling impact is achieved by means of a timer that updates the scroll place at common intervals.
The plugin handles totally different scrolling instructions by adjusting the scroll place accordingly. For left and up instructions, it will increase the scroll place. For proper and down instructions, it decreases the scroll place.
When the scroll place reaches the top of the content material, it resets to the start, creating the phantasm of infinite scrolling. The plugin additionally checks if the content material is longer than the container to find out if scrolling is critical.
Customers can customise the plugin’s habits by means of varied choices. These embrace setting the scrolling pace, enabling or disabling looping, including pause on hover performance, and adjusting the house between scrolling gadgets.
This superior jQuery plugin is developed by th74100. For extra Superior Usages, please test the demo web page or go to the official web site.
