بسم الله الرحمن الرحيم
السلام عليكم
اضافة ScrollPress تحتوي على العديد من الخواص التي ستساعدك في بناء موقعك,
خواص الاضافة:
عمل انيميشن عند ال scroll
زرار scroll to top مع تاثيرات عند الضغط
عمل scroll لعناصر التي تحتوي على لينك لid في نفس الصفحة
عمل scroll لاكثر من عنصر باستخدام scrollOnClick_multi (مثلا لقائمة onepage)
معاينة الاضافة:
https://scrollpress.github....رابط الاضافة:
اذا كان لديك اي سؤال او اقتراح برجاء نشره
خواص الاضافة
$(window).scrollPress({
scrollPress: true, // لعمل انيميشين لل scrollTop
duration: 1000, // مدة الانيميشن
easing: 'easeInOutCubic', // (طريقة الانيميشن (معادلة التوقيت
btn_state: null, // false اذا كنت لا تريد زرار الصعود الى اعلى
// (fontawsome سهم الصعود الى اعلى (يستلزم مكتبة
btn_icon: "<i class='fa fa-angle-up'></i>",
/**
* type {Jquery selector}
* example: $('.footer-element-scrollToTop')
*/
btn_container: null, // لوضع زرار الصعود الي اعلى في عنصر ثابت
// type {Number}
// حافة ظهور الزرار
btn_threshold: $window.innerHeight()/3,
// false اذا كنت تريد عمل استايل جديد من ملف خارجي
btn_inlineStyle: true,
// ستايل الزرار
btn_style: {
width: '40px', // العرض
height: '40px', // الارتفاع
right: '20px', // يمين
bottom: '20px', // تحت
backgroundColor: 'white', // لون الزرار
borderRadius: '14%', // انحناء الحواف
transition: 'all 1s ease',
},
// التاثير الخاص بشكل ظهور زرار الصعود الى اعلى
btn_fadeAnimation: {
slide: true,
scale: true,
bounce: false,
rotate: false,
},
// type {String}
btn_fadeInClass: null, // كلاس لوضعه عند ظهور الزرار
// type {Boolean}
btn_clickAnimation_bounce: false, // تاثير عند الضغط على الزرار
btn_clickAnimation_bubble: {
state: true, // false اذا كنت لاتريد هذا التاثير
backgroundColor: '#96d0ff', // لون bubble
borderRadius: null, // انحناء الحواف
},
btn_clickAnimation_spreadBorder: {
state: true, // false اذا كنت لاتريد هذا التاثير
borderWidth: '4px', // حجم الحواف
borderStyle: 'solid', ستايل الحواف
borderColor: '#e1e1e1', // لون الحواف
borderRadius: null // انحناء الحواف
},
//type {String}
btn_clickClass: null, // كلاس لوضعه عند الضغط على الزرار
/*
* scroll to target offset when click on selector
*/
// لعمل سكرول لعنصر عند الضغط على عنصر اخر بتوقيت و تاثير خاص
// مثل قائمة الصفحة الواحدة
// يمكنك استخدام id مع href اذا كنت تريد توقيت وتاثير الانيميشن العام
scrollOnClick: {
// type {JQuery selector}
clickOn: null, // العنصر الذي سيتم الضغط عليه
/**
* unique selector(preferred id)
* type {JQuery selector}
*/
scrollTo: null, // العنصر الذي سيتم الScroll اليه
duration: 1400, // توقيت الscroll بال ms
easing: null // (طريقة الانيميشن (معادلة التوقيت
},
// لعمل Scroll لعنصر عند الضغط على عنصر اخر بتوقيت و تاثير خاص
scrollOnClick_multi: {
0: {
clickOn: null,
scrollTo: null,
duration: null,
easing: null
},
1: {
clickOn: null,
scrollTo: null,
duration: null,
easing: null
}
}
});
التعليقات