اضافة ScrollPress جيكويري

بسم الله الرحمن الرحيم

السلام عليكم

اضافة 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
            }
        }

});