Smooth Marquee dengan jQuery

Jumat, 01 Desember 2017

Jika sebelumnya marquee dibuat menggunakan tag html <marquee>..</marquee>, maka sejak HTML5 tag marquee sudah dihapus, dan sebagai gantinya bisa dibuat menggunakan jQuery. Apa itu marquee ? marquee merupakan tag HTML yang berfungsi untuk membuat teks berjalan. Untuk demonya silahkan klik tombol dibawah:

Demo

Jika Anda tertarik untuk memasang marquee ini silahkan ikuti langkah dibawah :
1. Pasang jQuery pada web/blog Anda (abaikan jika sudah ada) :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

2. Salin script berikut lalu tempel diatas tag </head> :


<script type='text/javascript'>
//<![CDATA[
$(function () {
 //this is the useful function to scroll a text inside an element...
 function startScrolling(scroller_obj, velocity, start_from) {
  //bind animation inside the scroller element
  scroller_obj.bind('marquee', function (event, c) {
   //text to scroll
   var ob = $(this);
   //scroller width
   var sw = parseInt(ob.parent().width()
   );
   //text width
   var tw = parseInt(ob.width());
   tw = tw - 10;
   //text left position relative to the offset parent
   var tl = parseInt(ob.position().left);
   //velocity converted to calculate duration
   var v = velocity > 0 && velocity <
   100 ? (100 - velocity) * 1000 : 5000;
   //same velocity for different text's length in relation with duration
   var dr = (v * tw / sw) + v;
   //is it scrolling from right or left?
   switch (start_from) {
    case 'right':
     //is it the first time?
     if (typeof c == 'undefined') {
      //if yes, start from the absolute right
      ob.css({
       left: (sw - 10)
      });
      sw = - tw;
     } else {
      //else calculate destination position
      sw = tl - (tw + sw);
     };
     break;
    default:
     if (typeof c == 'undefined') {
      //start from the absolute left
      ob.css({
       left: - tw
      });
     } else {
      //else calculate destination position
      sw += tl + tw;
     };
   }
   //attach animation to scroller element and start it by a trigger

   ob.animate({
    left: sw
   }, {
    duration: dr,
    easing: 'linear',
    complete: function () {
     ob.trigger('marquee');
    },
    step: function () {
     // check if scroller limits are reached
     if (start_from == 'right') {
      if (parseInt(ob.position().left) < -
      parseInt(ob.width())) {
       //we need to stop and restart animation
       ob.stop();
       ob.trigger('marquee');
      };
     } else {
      if (parseInt(ob.position().left) >
      parseInt(ob.parent().width())) {
       ob.stop();
       ob.trigger('marquee');
      };
     };
    }
   });
  }).trigger('marquee');
  //pause scrolling animation on mouse over
  scroller_obj.mouseover(function () {
   $(this).stop();
  });
  //resume scrolling animation on mouse out
  scroller_obj.mouseout(function () {
   $(this).trigger('marquee', [
    'resume'
   ]);
  });
 };
 //the main app starts here...
 //settings to pass to function
 var scroller = $('.scrollingtext'); //element(s) to scroll
 var scrolling_velocity = 78; // 1-99
 var scrolling_from = 'right'; // 'right'or 'left'
 //call the function and start to scroll..
 startScrolling(scroller, scrolling_velocity, scrolling_from);
});
//]]>
</script>

3. Lalu pasang CSS marquee, salin kode CSS dibawah, dan paste di atas tag </b:skin>


#scroller {
 background-color:#00b6ff;
 color:#fff;
 font-size:14px;
 height:28px;
 line-height:28px;
 overflow:hidden;
 position:relative;
 width:100%;
 padding-top:1px;
}
.scrollingtext {
 color:#fff;
 white-space:nowrap;
 position:absolute;
 font-size:14px;
}

4. Semua sudah beres, tinggal menyiapkan tag HTML :


<div id="scroller">
 <div class="scrollingtext">
  <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
 </div>
</div>

Semoga bermanfaat :)