للبحـث بداخـل المدونــة . . .

إضافة تأثير اللمس و الحركة على مدونتك





 اللمس و الحركة 


تأثير التمرير بواسطة اللمس ليس حرفيا أنك تلمس الشاشة لا، ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (Cursor) هذا التأثير رائع ويشتغل بشكل طبيعي، بها يستطيع قرائك النزول أو الصعود بدون استعمال شريط التمرير (Scroll bar) ايضا يمكنك النزول أو الصعود بسرعة عبر السحب كما بالهواتف
بهذا الكود ستشعر بالفرق الكبير عند استخدام و الدخول للمدونة
فقط على مدونة هلا تك

لمعرفة طريقة التركب الشرح موجود بالاسفل









معاينة




شرح طريقة التركيب


1. توجه الى المظهر >> تحرير
2. انسخ الكود التالي وضعه فوق


</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>







و شكرا
صاحب مدونة هلا تك التي تهتم بكل ما هو جديد على منصة بلوجر من أضافات و قوالب و شروحاتهم

إرسال تعليق

✩ تساعدنا ملاحظاتك في تطوير مدونتنا وتكون من خلال مشاركة أفكارك واقتراحاتك معنا.
رأيك يهمنا، لذا يرجى مشاركته معنا. يمنع إضافة روابط لأي موقع في التعليقات و شكرا لتفهمك .

أهم الموضوعات المميزة

ملفات تعريف الأرتباط
يستخدم موقعنا ملفات تعريف الارتباط Cookies لتحسين تجربتك أثناء تصفحك لموقعنا .
إقرأ المزيد
هنـاك مشكـلة !
يبدو أن هناك خطأ ما في اتصالك بالإنترنت. يرجى الاتصال بالإنترنت وبدء التصفح مرة أخرى.
تـم الكشــف عن مانــع أعلانــات !
المعذرة ! لقد إكتشفنا أنك قمت بتنشيط Ad-Blocker يرجى النظر في دعمنا من خلال تعطيل Ad-Blocker الخاص بك فهو يساعدنا في تطوير هذا الموقع . . . وشكرا لتفهمك !
Site is Blocked
Sorry! This site is not available in your country.