مساحة اعلانية

آخر المواضيع

اضافة تأثير اللمس لمدونة بلوجر 2016

ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (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>


منقول للافاده

الكــاتــب

    • مشاركة

ليست هناك تعليقات:

لا تذهب دون أن تترك تعليقك على الموضوع

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

جميع الحقوق محفوظة لــ مدونة كل العرب 2020 © DMCA.com Protection Status