illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 1033 ۲۹ فروردین ۹۴

در این مطلب میخوام یک پلاگین 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 : میتونین در مقابل این ویژگی تابعی رو قرار بدین که زمانی که اسکرول سایتتون به آخر رسید ، کدهای درون تابع اجرا بشن.

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

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

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram