Cara Menambahkan Efek Scrolling Mouse Beroda Tikus di Blogger

Pernahkah Anda melihat situs web yang menambahkan efek scroll mouse roda yang mulus? Ini adalah cara yang bagus untuk membuat gerakan gulir lancar karena memberi pengalaman bergulir yang lebih baik kepada pengguna Anda saat membaca konten yang panjang. Baru-baru ini, salah satu pengguna kami bertanya kepada kami tentang menambahkan efek penggulung roda mouse yang mulus di blogger. Pada artikel ini, kami akan menunjukkan cara menambahkan efek mouse wheel scroll yang mulus di blogger.

Efek rolling mouse mouse yang mulus membuat situs Anda lebih mudah dinavigasi. Ini menambahkan pengguliran vertikal di situs Anda sehingga Anda bisa menggulir ke atas / bawah halaman web dengan roda mouse dengan lancar

Hal pertama yang perlu Anda lakukan adalah pergi ke Blogger >> Template >> Edit HTML, sekarang di template cari tag </ head>. Setelah menemukan tag </ head>, tepat di atasnya paste kode berikut.

<script type='text/javascript'>
/*<![CDATA[*/
/**
 *Smooth Scroll Mouse Wheel By Mybloggerlab.com
 */
(function() {
this.GambitSmoothScroll = function( settings ){
 if ( typeof settings === 'undefined' ) {
  settings = {};
 }
 var defaults = {
  'amount': 150,
  'speed': 900
 };
  for ( var key in defaults ) {
  if ( ! settings.hasOwnProperty( key ) ) {
   settings[ key ] = defaults[ key ];
  }
 }
 // Disable in mobile because we don't need smooth scrolling there
 if ( navigator.userAgent.match(/Mobi/)) {
  return;
 }
  this.settings = settings;
 this.startedAsTrackpad = false;
 this.start();
};

/**
 * Start our plugin
 */
GambitSmoothScroll.prototype.start = function() {
 document.addEventListener('DOMContentLoaded', function() {
  window.addEventListener( 'wheel', this.overrideScroll.bind(this) );
   }.bind(this));
};

/**
 * Stops the current scroll
 */
GambitSmoothScroll.prototype.stop = function( isDown, timestamp ) {
 if ( typeof this.scrollInterval !== 'undefined' ) {
  this.startedAsTrackpad = false;
  clearInterval( this.scrollInterval );
  this.scrollInterval = undefined;
 }
};

/**
 * Performs the smooth page scroll
 */
GambitSmoothScroll.prototype.newScroll = function( isDown, timestamp ) {
  // If the scroll went the opposite way, reset the scroll as if from full stop
 if ( isDown !== this.isDown && typeof this.isDown !== 'undefined' ) {
  this.stop();
 }
 this.isDown = isDown;
  // If called to scroll from a full stop, create our scroller loop
 if ( typeof this.scrollInterval === 'undefined' ) {
    this.startingSpeed = this.settings.amount;
  this.scrollInterval = setInterval( function() {
      // Perform the scroll
   var scrollBy = ( this.isDown ? 1 : -1 ) * this.startingSpeed / 15;
   window.scrollBy( 0, scrollBy );
   // Stop the scroller when the scroll becomes too small
   this.startingSpeed *= 1 - ( 900 / this.settings.speed ) / 10; // 0.9;
   if ( Math.abs( scrollBy ) < 1 ) {
    this.stop();
   }
  }.bind(this), 16.666666667 ); // 60fps
   // If called while the page is still scrolling, add more momentum to the current scroll
 } else {
  // Base the momentum multiplier on the delta time to avoid super fast scrolls
  var multiplier = 1 + ( timestamp - this.prevTimestamp ) / 40 * 0.7;
    // Limit the amount
  this.startingSpeed = Math.max( this.startingSpeed * multiplier, this.settings.amount );
  this.startingSpeed = Math.min( this.startingSpeed, 300 );
 }
 this.prevTimestamp = timestamp;
};

/**
 * Stops the default scroll behavior and does our own thing
 */
GambitSmoothScroll.prototype.overrideScroll = function(e) {
  // Normalize wheel delta scroll
 var delta = e.wheelDelta ? -e.wheelDelta / 120 : (e.detail || e.deltaY) / 3;
  /**
  * Basically, when we check the delta variable, trackpads give out a value of < 1 && < -1
  * mouse wheel scrolls give out a value >= 1 || <= -1
  * We can use this to turn OFF smooth scrolling for trackpads.
  *
  * IMPORTANT: Firefox in Mac somehow handles things differently.
  * the skipCheck variable handles things for FF in Macs
  */
  // Special for Firefox-Mac
 var skipCheck = false;
 if ( typeof window.mozInnerScreenX !== 'undefined' ) {
  if ( navigator.platform.indexOf( 'Mac' ) !== -1 ) {
   this.startedAsTrackpad = false;
   skipCheck = true;
   if ( e.deltaY === parseInt( e.deltaY, 10 ) ) {
    this.startedAsTrackpad = true;
    return;
   }
  }
 }
 if ( typeof this.trackpadTimeout !== 'undefined' ) {
  clearTimeout( this.trackpadTimeout );
  this.trackpadTimeout = undefined;
 }
  // If delta is less than 1, assume that we are using a trackpad and do the normal behavior
 if ( ( Math.abs( delta ) < 1 || this.startedAsTrackpad ) && ! skipCheck ) {
    this.trackpadTimeout = setTimeout( function() {
   this.startedAsTrackpad = false;
   this.trackpadTimeout = undefined;
  }.bind(this), 200 );
    this.startedAsTrackpad = true;
  return true;
 }
  // If the code reaches here, then scrolling will be smoothened
 // Disable normal scrolling
 e = e || window.event;
 if ( e.preventDefault ) {
  e.preventDefault();
 }
 e.returnValue = false;
  // Perform our own scrolling
 this.newScroll( delta > 0, e.timeStamp );
};
}());
/*]]>*/
</script>

Now again in the template, search for </body> and just above it paste the following code.

<script type="text/javascript">
new GambitSmoothScroll({
    amount: 150, // The scroll amount
    speed: 900 // The scroll speed
});
</script>

Catatan: Pastikan template blogger Anda memiliki file jquery.min.js atau jquery.js. Jika Anda tidak dapat menemukan file ini di template blogger Anda, tambahkan secara manual. Tambahkan kode berikut di bawah tag <head>.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>

Setelah semuanya selesai, simpan template dengan menekan tombol "Simpan Template" dan Anda telah berhasil menambahkan efek roda gigi mouse yang keren dan mulus di blogger.

Semoga tutorial ini bermanfaat bagi mereka yang ingin menambahkan scroll mouse parallax mulus menggunakan jQuery ke situs web mereka. Jika Anda memiliki cara yang lebih baik dalam melakukan pekerjaan ini maka silakan memberikan komentar di bawah ini. Jika Anda menyukai artikel ini, bagikan di Fb, Twitter atau Google+. Wassalam😄

Artikel Menarik Lainnya

blogging Tutorial tutorial blog