A jQuery plug-in that adds scrolling
vertical tickers to your site
Events
vticker.beforeTick
Sent before the ticker changes the current item
beforeTick Example
function setInitialOpacities() {
var ul = jQuery('#before-tick ul');
ul.children('li:nth-child(1)').css("opacity", .15);
ul.children('li:nth-child(2)').css("opacity", .15);
ul.children('li:nth-child(3)').css("opacity", .23);
ul.children('li:nth-child(4)').css("opacity", 1);
ul.children('li:nth-child(5)').css("opacity", .23);
ul.children('li:nth-child(6)').css("opacity", .15);
ul.children('li:nth-child(7)').css("opacity", .15);
}
$('#before-tick').vTicker({showItems: 7, padding: 4});
setInitialOpacities();
$('#before-tick').on('vticker.beforeTick', function() {
var ul = jQuery('#before-tick ul');
var interval = 500;
ul.children('li:nth-child(1)').animate({opacity: .15}, interval);
ul.children('li:nth-child(2)').animate({opacity: .15}, interval);
ul.children('li:nth-child(3)').animate({opacity: .23}, interval);
ul.children('li:nth-child(4)').animate({opacity: .23}, interval);
ul.children('li:nth-child(5)').animate({opacity: 1}, interval);
ul.children('li:nth-child(6)').animate({opacity: .23}, interval);
ul.children('li:nth-child(7)').animate({opacity: .15}, interval);
ul.children('li:nth-child(8)').css("opacity", .15);
});beforeTick Result
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
vticker.afterTick
Sent after the ticker has changed to the next item.
afterTick Example
$('#after-tick').vTicker({showItems: 7, interval: 1000, padding: 4});
$('#after-tick').on('vticker.afterTick', function() {
var colours = ["white", "orange", "cyan", "magenta", "silver", "purple"];
var randomColour = colours[Math.floor(Math.random() * 5)];
$('#after-tick ul li').css("color", randomColour);
});afterTick Result
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
vticker.pause / vticker.resume
Sent when vticker pauses or resumes
Example
var pauseTimerId = undefined;
$("#pause-tick").vTicker({padding: 4});
$("#pause-tick").on('vticker.pause', function() {
if(pauseTimerId) {
clearTimeout(pauseTimerId);
pauseTimerId = undefined;
}
$("#pause-info").text("I've have paused, I'm taking a little rest");
});
$("#pause-tick").on('vticker.resume', function() {
$("#pause-info").text("I've resumed");
pauseTimerId = setTimeout(function() {
$("#pause-info").text("Hover on the ticker above for this example to see my status change");
}, 1000);
});Result
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
- Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
- Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
Status
Hover on the ticker above for this example to see my status change