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

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



  آیا می دانید تا کنون 6253 نفر در 14 دوره آموزشی سون لرن ثبت نام کرده اند !

Scrollify : پلاگین jQuery برای اسکرول شدن به بخشهای مختلف

8 1553 ۲۱ اردیبهشت ۹۴

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

Scrollify

 

با استفاده از این پلاگین میتونین سایتتون رو به بخشهای مختلفی تقسیم بندی کنید و بعد از اون با استفاده از کلیدهای بالا و پایین کیبورد و یا با استفاده از Mouse Wheel میتونین بین بخشها جابجا بشین. این پلاگین خیلی بدرد گوشی و موبایل میخوره و برای حالت لمسی هم تنظیماتش بخوبی انجام شده. پشتیبانی این ابزار از مرورگرها خیلی خوب هست.

میبینید که 5 تا بخش قرار داره و با دکمه های بالا و پایین میتونین بین این بخشها جابجا بشین. یعنی اسکرول شدن بصورت پله ای و یکدفعه ای هست و بصورت پیوسته نیست.

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

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

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

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

اولین کاری که باید بکنیم اینه که برای هر بخش یک Section قرار بدیم و class = panel رو به اون نسبت بدیم و محتویات مورد نظرمون رو درونش قرار بدیم :

میبینید که 5 تا section قرار دادم و درون اولی یک button هم گذاشتم که میخوام با کلیک بر روی اون به بخش بعدی منتقل بشم. باید با استفاده از خاصیت data-section-name برای هر بخش یک اسم قرار بدین ، بصورت زیر :

این اسامی در url سایت و بعد از علامت # قرار میگیرن.

استایلهای CSS زیر رو برای اونا قرار میدم :

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

میبینید که section های با کلاس panel رو انتخاب کردیم و ارتفاعشون رو برابر با ارتفاع window قرار دادیم. در بالا منهای 100 هم کردیم ، به این دلیل که در کدهای CSS یک padding از بالا به اندازه ی 100 پیکسل براش قرار داده بودیم.

مرحله بعد باید کد زیر رو قرار بدین :

میبینید که ابتدا متد scrollify رو فراخوانی کردیم. ویژگی های این متد :

  • section : برای این ویژگی باید کلاس بخشهای مختلف رو قرار بدین
  • easing : باید در این قسمت نوع حالت انیمیشنی که میخواید اتفاق بیوفته رو قرار بدین. میتونین انواع مختلف رو در این سایت ببینید.
  • scrollSpeed : با استفاده از این ویژگی میتونین سرعت اسکرول شدن رو مشخص کنید که بر حسب میلی ثانیه هست
  • scrollbars : اگر مقدار این ویژگی رو false قرار بدین ، اسکرولبار مرورگر مخفی میشه.

حالا فرض کنید میخوام با کلیک بر روی دکمه موجود در بخش اول ، به بخش دوم اسکرول بشم ، برای اینکار :

میبینید که با استفاده از خاصیت move ، به بخش section2 منتقل میشه.

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

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

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

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

دیدگاه ها 8 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏

    سلام آقای اسفندیاری
    لطفا یک پلاگین معرفی کتید که با اسکرول کردن سکشن بعدی بیاد و روی سکش فعلی قرار بگیره بدون اینکه سکشن فعلی تکون بخوره
    ممنون
    موفق باشید

  • ‏‏

    سلام ببخشید من چجوری میتونم از اسکرول برای بادی استفاده کنم ؟
    مثلا بگم اگه اسکرول رو آیتم 2 بود اون آیتم2 موجود در منو اکتیو بشه ؟ یا اگر آیتم 2 موجود منو کلیک شد به آیتم 2 بره
    و میخوام حتما واکنش گرا هم باشه
    برای واکنشگرا بودنش حتما باید از بوت استرپ استفاده کنم ؟

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram