Learn free online HTML5, javascript, and jquery Tutorials by Examples

Thursday 4 July 2019

Text scroller in jQuery

See the Pen Text scroller in jQuery by satish mallick (@mallick_satish) on CodePen.

I am a

designer. developer. human.
STYLES
    * {
        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