الموضوع
اقرأ ايضًا
التعليقات
عن الكاتب
تعليمات
مرحبا بمتابعينا الأعزاء في كل مكان وزمان، سنتعرف اليوم على اضافة جديدة بمدونتنا ألا وهي تأثير التمرير بواسطة اللمس ليس حرفيا أنك تلمس الشاشة 😜 لا، ستمكنك الإضافة بالنزوال والصعود فقط بالتحكم بالمُؤشر (Cursor) هذا التأثير رائع ويشتغل بشكل طبيعي، بها يستطيع قرائك النزول أو الصعود بدون استعمال شريط التمرير (Scroll bar) ايضا يمكنك النزول أو الصعود بسرعة عبر السحب كما بالهواتف.
قبل أن تضيف هذا التأثير قم بتجربته أولا
شرح طريقة التركيب
1. توجه الى قالب >> تحرير
2. انسخ الكود التالي وضعه فوق </body>
قبل أن تضيف هذا التأثير قم بتجربته أولا
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😊😉😀😁😎😍😜😑😇💖😯😱😭👍❓🍻
إرشادات
- موقع : Mediafire
- موقع :file-upload
- باسوورد فك الضغط للملفات المضغوطة : Ar1web2014
- تجدون روابط التحميل في القوالب والملحقات بجانب التدوينة أي بالسيدبار
- كل ملحق أو قالب يوجد بالمدونة هو للإستعمال الشخصي فقط
- إن تواجد رابط معطوب فالمرجو التبليغ عنه هنا، شكرا.
تحميل الملفات
أين تجدنا؟
كلمة الختام
أخر تعديل كان في يوم السبت 20 يونيو من سنة 2020 ، هذه الصفحة قابلة للتعديل وقت اللزوم
اضافة جميلة لكن ما اعجبني اكثر هو الزر في الاسفل ('ركب التاثير') ليتك اخي تضيفه في تدوينة :) وجزاك الله كل خير
ردحذفعلى الرحب اخي وبما أن التدوينة قد لا ننشرها أو سنتأخر في نشرها فقم بتركيب الزر الآن تابع التالي :
حذف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>
لأي غرض يستعمل لم افهم واتمنى ترد علي بالفيسبوك انا Hussein Azad
ردحذفليس لها غرض فعلي
حذفالسلام عليكم اخي ممكن شرح تركيب سلايدر موقعك
ردحذفعليكم السلام اضافات القالب لا يتم نشرها اخي
حذفخســارة فكـرت انو الموقع عندي رح يصبح على اللمـس XD
ردحذفأيـن المصداقيـة بالمدونة ؟؟ ههههه
الفكرة جميلة لكن فيها مشكلة لا تستطيع تحديد النصوص فيها
ردحذفطيب اخي كيف يمكن ازاله هذه الخاصيه بعد وصضعها
ردحذفهل لي بكيفية تغيير شكل الاماوس كما بالمعاينة فوق وشكرا
ردحذفشكراً جزيلاً اخى الكريم
ردحذف