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