scrolline : پلاگین jQuery برای نشون دادن میزان اسکرول در صفحه

- visibility ۰ mode_comment

در این مطلب میخوام یک پلاگین jQuery بنام scrolline رو خدمت شما معرفی کنم و اونو آموزش بدم.

 

Scrolline

با استفاده از این پلاگین میتونین یک نوار زیبا در اطراف سایتتون قرار بدین و با استفاده از اون به کاربر نشون بدین که در کجای سایت قرار داره و چقدر دیگه به پایان صفحه میرسه. متناسب با اندازه ای که به پایین اسکرول میکنید ، این نوار هم به همون مقدار زیاد میشه و ظاهر زیبایی به سایتتون میبخشه. پشتیبانی این پلاگین از مرورگرها خیلی خوب هست و میتونین از اون استفاده کنید.

میبینید که یک صفحه بلند با محتویات زیاد قرار داده شده و هر زمان که به سمت پایین اسکرول میکنید ، اون نوار هم پر میشه.

نحوه استفاده :

ابتدا باید به صفحه مربوطه در سایت Github برید و فایلهای مورد نظر رو دانلود کنید. در این مطلب ما به jquery.scrolline.js و jquery.min.js نیاز داریم. این فایلهارو در انتهای مطلب قرار دادم و میتونین از اونا استفاده کنید.

حالا یه فایل بنام index.html بسازید و کدهای زیر رو درونش قرار بدین :

میبینید که تا اینجا فایلهای مورد نظر رو وارد کردیم. همچنین کدهای CSS و HTML مورد نظر رو نوشتیم.

اولین کاری که باید بکنید اینه که برای مثال محتویاتی قرار بدیم که ارتفاع سایت زیاد بشه و بتونین روی این ابزار کار کنید. من 5 تا تگ p با محتویات زیاد قرار میدم :

بعد از اون استایل ساده زیر رو براشون در نظر میگیرم :

حالا میتونم بیام و بسادگی این پلاگین رو فعال کنم. برای اینکار بصورت زیر عمل میکنم و کدهای زیر رو در تگ اسکریپت نهایی قرار میدم :

تا اینجا اگر در خروجی مشاهده کنید ، اون نوار با استایلهای پیش فرضش قرار داده شده و کار تمومه. این ابزار تعدادی ویژگی داره که مهمتریناش رو در پایین آوردم :

  • position : با استفاده از این ویژگی میتونین محل قرارگیری نوار رو مشخص کنید. که مقادیر top و left و right و bottom رو میتونین قرار بدین
  • direction : میتونین عمودی یا افقی بودن نوار رو مشخص کنید. horizontal و vertical رو میتونین قرار بدین
  • reverse : اگر این ویژگی رو برابر با true قرار بدین ، این نوار بصورت برعکس شروع به پر شدن میکنه
  • backColor : رنگ نوار پشتی و ثابت
  • frontColor : رنگ نوار جلویی و متحرک
  • weight : ضخامت نوار
  • scrollEnd : میتونین در مقابل این ویژگی تابعی رو قرار بدین که زمانی که اسکرول سایتتون به آخر رسید ، کدهای درون تابع اجرا بشن.

برای مطالعه بیشتر میتونین به این لینک مراجعه کنید.

امیدوارم خوشتون اومده باشه.

موفق باشید. یا علی

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.