jQuery - Text roller animation

0 votes
368 views
added Jan 10, 2019 in jQuery by LC Marshal Captain (25,790 points)
(function($){
  var terms = ['joyful','dream','perfect','bargain','ideal','luxury'];
  var i = 0;
  function rollerout(){

    $(".roller").animate({opacity: 0, left: '-150px'}
                        , 500,function(){
                          $(".roller").text(terms[i]);
                          rollin();
                        });
  }
  function rollin(){
    $(".roller").css('display', 'block').animate({opacity: 1.0, left: '150px'}
                        , 500,function(){
                          i = i+1;
                          i = (terms.length == i)?0:i;
                          setTimeout(rollerout,2000);
                        });
  }
  rollin();
})(jQuery);

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...