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

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

يوجد الآن مشاهدة التعليقات : 11

الموضوع

اقرأ ايضًا

التعليقات

عن الكاتب

تعليمات

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة
5😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻

هناك 11 تعليقًا:

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

    ردحذف
    الردود
    1. على الرحب اخي وبما أن التدوينة قد لا ننشرها أو سنتأخر في نشرها فقم بتركيب الزر الآن تابع التالي :
      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>

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

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

    ردحذف
    الردود
    1. عليكم السلام اضافات القالب لا يتم نشرها اخي

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

    ردحذف
  5. غير معرف4/28/2016

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

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

    ردحذف
  7. هل لي بكيفية تغيير شكل الاماوس كما بالمعاينة فوق وشكرا

    ردحذف
  8. غير معرف1/28/2017

    شكراً جزيلاً اخى الكريم

    ردحذف

عن الكاتب :

إرشادات

    تحميل الملفات

    نستخدم بمدونتنا مواقع مختلفة في رفع الملفات ونوفر منها إثنان:
  • موقع : Mediafire
  • موقع :file-upload
  • باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
  • تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
  • كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
  • إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
  • أين تجدنا؟

    بعيدا عن الصفحات المزورة أو المزيفة التي يحاول البعض من خلالها استغلال جهود فريق عمل عرب ويب، هذه هي حساباتنا وصفحاتنا الرسمية في الشبكات الاجتماعية، لا نمتلك سوى هذه الصفحات والحسابات وهي الوحيدة التي تتبع للمدونة : https://www.instagram.com/ar1web

    كلمة الختام

    في مدونة عرب ويب نسعى دوما جاهدين للتحسن والتقدم وليس ما تراه هو حدودنا! ونحن نقدر كثيرا زوارنا وآراؤهم فإن كان لديك أي اقتراح/نصيحة/ومضة مفيدة/نقد بناء أو ما إلى ذلك يمكنك مشاركتنا كل ما في جعبتك من خلال الإتصال بنا : istoretech3@gmail.com
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم