19‏/03‏/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>
مرحبا بمتابعينا الأعزاء في كل مكان وزمان، سنتعرف اليوم على اضافة جديدة بمدونتنا ألا وهي تأثير التمرير بواسطة اللمس ليس حرفيا أنك تلمس الشاشة 😜 لا، ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (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>
10 Blogger تعليقات
Disqus
10 التعليقات
المشرف
avatar

اضافة جميلة لكن ما اعجبني اكثر هو الزر في الاسفل ('ركب التاثير') ليتك اخي تضيفه في تدوينة :) وجزاك الله كل خير

المشرف
avatar

لأي غرض يستعمل لم افهم واتمنى ترد علي بالفيسبوك انا Hussein Azad

المشرف
avatar

السلام عليكم اخي ممكن شرح تركيب سلايدر موقعك

المشرف
avatar

عليكم السلام اضافات القالب لا يتم نشرها اخي

المشرف
avatar

ليس لها غرض فعلي

المشرف
avatar

خســارة فكـرت انو الموقع عندي رح يصبح على اللمـس XD
أيـن المصداقيـة بالمدونة ؟؟ ههههه

المشرف
avatar

على الرحب اخي وبما أن التدوينة قد لا ننشرها أو سنتأخر في نشرها فقم بتركيب الزر الآن تابع التالي :
1. ضع الكود الآتي فوق ]]></b:skin>
.buttonsBar{ padding-top: 20px; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; width:70%; margin:auto; } .button { cursor: pointer; font-size: 16px; font-family: Droid Arabic Naskh,sans-serif; letter-spacing: 1px; border-radius: 25px; float: left; min-width: 10px; max-width: 250px; display: block; margin: 1em; margin-left: 8px; margin-right: 8px; padding: 1em 0em; border: none; background: none; color: inherit; vertical-align: middle; position: relative; z-index: 1; -webkit-backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; overflow: hidden; color: #FFFFFF; min-width: 210px; background-color: #2C323C; font-weight: bold; } .redBandButton{ padding: 0; min-width: 280px; } .button.button--inverted { color: #37474f; border-color: #37474f; } .button::before, .button::after { content: attr(data-text); position: absolute; width: 100%; height: 50%; left: 0; background: #47cf73; color: #fff; overflow: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .button.button--inverted::before, .button.button--inverted::after { background: #fff; color: #37474f; } .button::before { border-radius: 5px; top: 0; padding-top: 1em; } .button.redBandButton::before { content: attr(data-text-1); padding-top: 7px; font-family: avenirMed, sans-serif; font-size: 16px; } .button#storyButton::before{ padding-top: 15px; } .button::after { border-radius: 0px 0px 20px 20px; bottom: 0; line-height: 0; } .button > span { display: block; -webkit-transform: scale3d(0.2, 0.2, 1); transform: scale3d(0.2, 0.2, 1); opacity: 0; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1); } .button:hover::before { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } .button:hover::after { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } .button:hover > span { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
2. ضع الكود بداخل موضوع بتويب HTML
<div class="buttonsBar">
<a href='#' target='_blank'><button id="gobackto-ar1web" class="button button--border-thick" data-text="ركب التأثير!"><span>التدوينة</span></button></a> </div>

المشرف
avatar

الفكرة جميلة لكن فيها مشكلة لا تستطيع تحديد النصوص فيها

المشرف
avatar

طيب اخي كيف يمكن ازاله هذه الخاصيه بعد وصضعها

المشرف
avatar

هل لي بكيفية تغيير شكل الاماوس كما بالمعاينة فوق وشكرا

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة