Last active
October 7, 2015 21:58
-
-
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....
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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