Smooth mouse bike scrolling number makes your site easier to navigate. It adds vertical scrolling on your site allowing y'all to smoothly scroll up/down the webpage using mouse wheel
The really get-go affair y'all demand to practise is to expire to Blogger >> Template >> Edit HTML, directly inwards the template search for the </head> tag. After finding the </head> tag, but inwards a higher house it glue the next code.
<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 telephone substitution inwards defaults ) {
if ( ! settings.hasOwnProperty( telephone substitution ) ) {
settings[ telephone substitution ] = defaults[ telephone substitution ];
}
}
// Disable inwards mobile because nosotros don't demand shine 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 electrical current scroll
*/
GambitSmoothScroll.prototype.stop = function( isDown, timestamp ) {
if ( typeof this.scrollInterval !== 'undefined' ) {
this.startedAsTrackpad = false;
clearInterval( this.scrollInterval );
this.scrollInterval = undefined;
}
};
/**
* Performs the shine page scroll
*/
GambitSmoothScroll.prototype.newScroll = function( isDown, timestamp ) {
// If the scroll went the contrary way, reset the scroll every bit if from total stop
if ( isDown !== this.isDown && typeof this.isDown !== 'undefined' ) {
this.stop();
}
this.isDown = isDown;
// If called to scroll from a total 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 also 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 spell the page is withal scrolling, add together to a greater extent than momentum to the electrical current scroll
} else {
// Base the momentum multiplier on the delta fourth dimension to avoid super fast scrolls
var multiplier = 1 + ( timestamp - this.prevTimestamp ) / twoscore * 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 demeanour too does our ain thing
*/
GambitSmoothScroll.prototype.overrideScroll = function(e) {
// Normalize bike delta scroll
var delta = e.wheelDelta ? -e.wheelDelta / 120 : (e.detail || e.deltaY) / 3;
/**
* Basically, when nosotros depository fiscal establishment check the delta variable, trackpads give out a value of < 1 && < -1
* mouse bike scrolls give out a value >= 1 || <= -1
* We tin give the axe work this to plow OFF shine scrolling for trackpads.
*
* IMPORTANT: Firefox inwards Mac somehow handles things differently.
* the skipCheck variable handles things for FF inwards 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 nosotros are using a trackpad too practise 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, too thus scrolling volition survive smoothened
// Disable normal scrolling
e = e || window.event;
if ( e.preventDefault ) {
e.preventDefault();
}
e.returnValue = false;
// Perform our ain scrolling
this.newScroll( delta > 0, e.timeStamp );
};
}());
/*]]>*/
</script>
Now i time again inwards the template, search for </body> and but inwards a higher house it glue the next code.
<script type="text/javascript">
novel GambitSmoothScroll({
amount: 150, // The scroll amount
speed: 900 // The scroll speed
});
</script>
Note: Make certain your blogger template has jquery.min.js or jquery.js file. In instance y'all are unable to discovery this file on your blogger template too thus add together it manually. Add the next code below the <head> tag.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js' type='text/javascript'></script>
Once everything is done, salvage the template yesteryear pressing “Save Template” push too y'all convey successfully added a cool shine mouse bike scroll number inwards blogger.
We promise this tutorial has plow out to survive useful for those who were looking to add together a shine parallax mouse bike scroll using jQuery on to their websites. If y'all convey a meliorate agency of doing this chore too thus experience gratis to larn out a comment below. If y'all similar this article, part it on Facebook, Twitter or Google+.
No comments:
Post a Comment