fullPage : پلاگین jQuery برای ساخت اسکرول تمام صفحه

- visibility ۱۳ mode_comment

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

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

میبینید که روی هر دکمه کلیک کنید ، به بخشهای مربوطه اسکرول میشه. همچنین در بخش دوم ، در سمت راست و چپ دو آیکون وجود داره ، که شبیه به اسلایدر عمل میکنه. همچنین میتونین با چهار کلید بالا و پایین و چپ و راست ، بین اسلایدها جابحا بشین.

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

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

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

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

اول چیزی که باید بدونیم ، اینه که هر بخش یا section رو بصورت یک div قرار میدن و همه اون بخشهارو درون یک div دیگه قرار میدن. بصورت زیر :

میبینید که برای div بزرگتر ، id = fullpage رو قرار دادیم و در درون اون اون 4 div قرار دادیم و برای هر کدوم کلاس section رو نسبت دادیم. اگه تعداد بخشهای بیشتری بخواین ، باید div های دیگه هم اضافه کنید.

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

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

میبینید که 4 اسلاید در این بخش قرار دادم. حالا میتونین به هر طریقی بین این اسلایدها جابجا بشین. با استفاده از کیبورد و یا قرار دادن دکمه و ....

من میخوام 4 دکمه قرار بدم که ، با کلیک بر روی هر کدوم ، به بخش مورد نظر منتقل بشیم. بصورت زیر :

میبینید که در خاصیت href هر لینک و خاصیت data-menuanchor هر li ، باید آدرس و نام قسمت مربوطه رو وارد کنیم. با این کار ، با کلیک بر روی این لینک ، به اون بخش منتقل میشیم. استایل ساده برای این منو :

تا اینجا اگه خروجی رو ببینید ، هیچ اتفاقی نیوفتاده. چون هنوز پلاگین رو اعمال نکردیم. برای اینکار باید در تگ script نهایی کدهای زیر رو قرار بدیم :

در ابتدا div کلی رو انتخاب کردیم و تابع fullpage رو برای اون فراخوانی کردیم. این تابع خیلی ویژگی داره. در بالا چندتا از مهمترینهاش قرار گرفته.

  • sectionColor : رنگ هر بخش رو مشخص میکنیم
  • anchor : لینک و آدرس هر بخش رو مشخص میکنیم
  • menu : در این قسمت باید ، id همون منویی که میخوایم با کلیک بر روی اون به بخشهای مختلف بریم رو ، قرار بدیم.
  • scrollingSpeed : سرعت اسکرول شدن رو مشخص میکنه. بر حسب میلی ثانیه هست.

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

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

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

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

عکسی که تو این دمو که گذاشتید ریسپانسیو نیست.
اونم میشه درست کنید 😀

لقمان آوند

از این سلکتور css می تونید استفاده کنید :

Mohsen Sh

ممنون استاد ❓

ali

سلام کد روی فایرفاکس درست اجرا نمیشه

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

تست کردم و مشکلی نداشت
شاید آپدیت نیس و شاید یه مشکلی با نت داشته باشه

ali

لوکال بازش کردم..حتی همین فایلی هم ک برا دانلود گذاشتین رو هم با فایرفاکس باز کردم…موقع اسکرول تقریبا 20px 20px میره بالا بجا section به section

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

با کلیدهای بالا و پایین کیبورد هم امتحان کردید؟

ali

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

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

شاید باگ داشته باشه ، میتونین به Github برید و مشکل رو مطرح کنید

سجاد

سلام خیلی عالی بود ولی …
میشه بگین چرا رو لوکال هاست و رو وردپرس لوکال هاست پلاگین اجرا میشه ولی تو هاست رایگان اجرا نمیشه؟http://pishgam.cloudsite.ir/wp/

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

مطمئن هستین که فایلهای CSS مربوطه رو در محل مورد نظر قرار دادین؟

سجاد

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

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

در inspector که باز کردم ارور 404 میده که یعنی وجود نداره….ممکنه مشکل از هاست باشه

نیاز به لاگین

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