Skip to content

Instantly share code, notes, and snippets.

@Pushplaybang
Last active October 7, 2015 21:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Pushplaybang/3230989 to your computer and use it in GitHub Desktop.
Save Pushplaybang/3230989 to your computer and use it in GitHub Desktop.
A neat little jquery ticker built for testimonials or tweets or anything that should tick tick tick....
/*Container*/
ul#testi_ticker {
font-size: 1.667em;
height: 10em;
overflow: hidden;
padding: 4.5em 0.4333em 0.4333em;
position: relative;
color: #447a8d;
}
/*element*/
ul#testi_ticker li {
height: 12em;
list-style: none;
text-align: center;
border: none;
opacity:0;
}
$(document).ready(function(){
/*
note that smoothing this out relys on the CSS
the children elements must have opacity set to 0
initially, and the container should also be hidden
in the CSS.
*/
function bangingTicker(container,element) {
// store the container
var tickContainer = $(container);
/* wrap the original tick function in a
callback function to the fadeIn*/
tickContainer.fadeIn(1000, function(){
function tick() {
// get the elements on each pass
var tickElem = tickContainer.children(element);
tickElem.eq(1).siblings().animate({
opacity: 0
},400, function() {
// movement animation
tickContainer.stop(true,true).delay(10).animate({
'margin-top': 120
},0,function() {
tickContainer.animate({
'margin-top': 20
},8000);
});
// rotating the elements
tickElem.first().appendTo(tickContainer);
// Show the first Element
tickElem.eq(1).delay(200).animate({
opacity: 1
},400);
});
} // end tick
/* run the function once to avoid waiting
for the interval on the first animation*/
tick();
// run the function at a set interval
setInterval(function(){ tick() }, 4000);
}); // end container fade in
}
// Run the function
bangingTicker('#testi_ticker','li');
});​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment