See the Pen Text scroller in jQuery by satish mallick (@mallick_satish) on CodePen.
I am a
designer.
developer.
human.
* {
margin: 0px;
padding: 0px;
font-weight: 300;
font-family: segoe ui, helvetica neue, helvetica, arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
body {
background: #dddfff;
}
.wrapper {
width: 400px;
height: 25px;
left: 50%;
top: 50%;
position: absolute;
margin-top: -15px;
margin-left: -150px;
}
p {
float: left;
font-size: 18px;
line-height: 25px;
margin-right: 6px;
color: #f00;
}
span {
display: block;
line-height: 25px;
font-size: 120%;
}
.scroll {
overflow-y: hidden;
height: 25px;
float: left;
}
SCRIPT
var maxIndex = $('.scroll span').length,
curIndex = 0;
$(function(){
moves();
})
function moves(){
$('.scroll').animate({ scrollTop: curIndex * $('.scroll span').height() + 'px' }, 300, function(){
if(curIndex + 1 === maxIndex){
curIndex = 0;
} else {
curIndex++;
}
setTimeout(function(){ moves() }, 2000);
});
}
No comments:
Post a Comment