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

- visibility ۱۰ mode_comment

در این مطلب میخوام یک پلاگین 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 منتقل میشه.

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

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

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

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

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

محمد اسفندیاری

ببینید این خوبه
http://www.7learn.com/tutorials/pagepiling-create-beautiful-fullscreen-scrolling-website

میوند

نزدیکه ولی جیزی که من میخواهم نیست چون شبیه یک اسلایدر هست من میخواهم همین افکت با اسکرول انجام بشه

محمد اسفندیاری

شما اگه نمونه آنلاینی مد نظرتون هست ، آدرسشو بدین تا ببینم

میوند

یه سایتی رو دیده بودم یادم نیست تا فردا براتون پیدا میکنم همینجا آدرس سایت رو میدم

محمد اسفندیاری

باشه موفق باشید

اصغر

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

محمد اسفندیاری

دوست عزیز در انجمن سوالتون رو قرار بدین
موفق باشید

banooyemah

سلام وقت بخیر
خب این رو چجوری روی وردپرس بریزیم چون نمیشه همش قاطی میشه؟ پلاگین آماده ای هست که بشه برای وردپرس بکار برد؟
ممنون

محمد اسفندیاری

منظورتون چیه قاطی میشه؟ در این زمینه ابزارهای دیگه ای هم هستن که میتونین ازشون استفاده کنید:
http://www.7learn.com/tutorials/fullpage-create-beautiful-fullscreen-scrolling-websites
http://www.7learn.com/tutorials/pagepiling-create-beautiful-fullscreen-scrolling-website

نیاز به لاگین

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