info@amertejarat.com 09124352456 @amertejarat @amertejarat amer-tejaratkhalijfars amertejaratkhalijfars

آموزش اسکرول افقی با جاوااسکریپت





خب برای داشتن نوار اسکرول  افقی مثل عکس پایین صفحه اول قسمت html  اونو مینویسیم .تگی که قسمت هدر رو مشخص میکنه ، تگ با کلاس progressContainer که کل عرض صفحه رو میگیره ، تگ داخل اون با کلاس progressBar که قراره عرض اون متناسبه با مقداری از صفحه ک پیمایش کردیم

اموزش نوار اسکرول افقی

و بعدش نوبت میرسه به کد های css  اونها

من میخوام داخلش سایه ابی داشته باشم و گوشه ها کمی گرد باشن

/* استایل مربوط به هدر صفحه ما */
        .header {
            position: fixed;
            top: 0;
            z-index: 1;
            width: 100%;
            background-color: #f9c413;
        }

        /* نوار اسکرول ما با رنگ طوسی */
        .progressContainer {
            width: 100%;
            height: 8px;
            background: #ccc;
        }

        /* قسمت متحرک نوار اسکرول */
        .progressBar {
            height: 8px;
            background: #01a8ec;
            width: 0%;
        }
        h2{
            text-align:center;
        }        

در اخر نوبت قسمت جاوا اسکریپت کدماست.توی این کد گفته میشه ک:

هر وقت که صفحه ما اسکرول شد (window.onscroll) تابع (progressFunction()) فراخوانی بشه.

تابع progressFunction()  ارتفاع کل صفحه رو اندازه میگیره و میریزه تو متغیر height

و ارتفاعی از صفحه که با اسکرول به اونجا رسیدیم تو متغیر winScroll ریخته میشه.

و محاسبه میشه چه درصدی از صفحه رو پیمایش کردیم ،این مقدار حالا تو متغیر scrolled است. و اون رو به عنوان عرض (width)      برای تگ با ای دی Bar که همون قسمت متحرک اسکرول ماست

  

امیدوارم این سری اموزش های پیشترفته ما به دردتون بخوره و نهایت استفاده رو براتون داشته باشه



 

    
    


    

اموزش نوار اسکرول افقی

 


آموزش اسکرول افقی با جاوااسکریپت