How to install Touch Screen Scroll effect on your blogger blog - Hey guys, today I'm going to share with you a new Touch Screen Scroll effect for your blog. This effect is awesome and it's working properly without any Problems. The actual importance of this plugin is that, if you install this on your blog, then your blog readers can easily scroll the page up and down without using the Scrollbar.
Before you add this effect on your blog, make sure to take a look of this plugin by clicking on the below demo button.
For those who want to try this effect, simply follow the below simple steps.
How to install Touch Screen Scroll Effect?
At the first, visit to your blogger dashboard - Login
Go to the "Template" editor.
Click on the "Edit html" button.
Copy the below JavaScript code and paste it just before the </body>
<script type='text/javascript'>
//<![CDATA[
function TouchScroll() {
var instance = this;
var Event = {
CHANGE: 'change',
COMPLETE: 'complete',
ERROR: 'error',
TOUCH_START: 'touchstart',
TOUCH_MOVE: 'touchmove',
TOUCH_END: 'touchend',
MOUSE_DOWN: 'mousedown',
MOUSE_MOVE: 'mousemove',
MOUSE_UP: 'mouseup'
};
this.options = {
'element': null
};
var drag = false;
var startevent = {};
var startpercentage = {};
var axis = 'y';
var target;
this.load = function(data) {
for (var item in data) {this.options[item] = data[item];}
addListeners();
setupAnimation();
}
function setupAnimation() {
window.requestAnimFrame = (function() {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {window.setTimeout(callback, 1000 / 60);};
})();
}
function addListeners() {
if (instance.options.element.addEventListener) {
instance.options.element.addEventListener(Event.MOUSE_DOWN, onTouchStart, false);
instance.options.element.addEventListener(Event.MOUSE_MOVE, onTouchMove, false);
instance.options.element.addEventListener(Event.MOUSE_UP, onTouchEnd, false);
instance.options.element.addEventListener(Event.TOUCH_START, onTouchStart, false);
instance.options.element.addEventListener(Event.TOUCH_MOVE, onTouchMove, false);
instance.options.element.addEventListener(Event.TOUCH_END, onTouchEnd, false);
}
}
function onTouchStart(e) {
drag = true;
target = instance.options.element || e.target;
startevent = e;
startpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
//console.log('onTouchStart', e, target);
e.preventDefault();
}
function onTouchMove(e) {
if (drag == true) {
var diffx = (startevent.pageX-e.pageX);
var diffy = (startevent.pageY-e.pageY);
target.scrollLeft += diffx;
target.scrollTop += diffy;
if (Math.abs(diffx) > 60) {axis = 'x';}
else if (Math.abs(diffy) > 100) {axis = 'y';}
//console.log('onTouchMove', target, diffx, diffy);
e.preventDefault();
}
}
function onTouchEnd(e) {
drag = false;
var endpercentage = {x: (e.x/window.innerWidth)*100, y: (e.y/window.innerHeight)*100}
var diffpercentagex = -(endpercentage.x-startpercentage.x);
var diffpercentagey = -(endpercentage.y-startpercentage.y);
var diffx = (window.innerWidth/100)*diffpercentagex;
var diffy = (window.innerHeight/100)*diffpercentagey;
//console.log('onTouchEnd', e, diffpercentagex, diffpercentagey);
//animate();
scrollAxis(diffx*1.5, diffy*1.5, axis);
e.preventDefault();
}
function animate() {
requestAnimFrame(animate);
console.log('animate');
}
function scrollAxis(diffx, diffy, axis) {
var x = target.scrollLeft;
var y = target.scrollTop;
var start = y;
var stop = start+diffy;
if (axis == 'x') {
start = x;
stop = start+diffx;
}
var distance = stop > start ? stop - start : start - stop;
if (distance < 50) {
if (axis == 'x') { instance.updatePosition(stop, y); }
else { instance.updatePosition(x, stop); }
return;
}
var speedY = Math.round(distance);
if (speedY >= 20) speedY = 20;
var step = Math.round(distance / 30);
var leapY = stop > start ? start + step : start - step;
var timer = 0;
//console.log(axis, distance, target, start, stop);
if (stop > start) {
for ( var i=start; i<stop; i+=step ) {
if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
leapY += step;
if (leapY > stop) leapY = stop;
timer++;
}
return;
}
for ( var i=start; i>stop; i-=step ) {
if (axis == 'x') { setTimeout("touchscroll.updatePosition("+leapY+", 0)", timer*speedY); }
else { setTimeout("touchscroll.updatePosition(0, "+leapY+")", timer*speedY); }
leapY -= step;
if (leapY < stop) leapY = stop;
timer++;
}
}
this.updatePosition = function(x, y) {
//console.log('window.scrollTo', x, y);
target.scrollLeft = x;
target.scrollTop = y;
}
}
TouchScroll.prototype = new TouchScroll();
var touchscroll = new TouchScroll();
touchscroll.load({
'element': document.getElementsByTagName('body')[0]
});
//]]>
</script>
Now save your template to apply the changes, refresh your blog and see the magic.
That's it ! I hope you like this Scroll effect! Stay tuned for more cool widgets! Thanks for reading +Prince Chaudhri
