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

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

13 4199 ۲۷ دی ۹۳

در این مطلب میخوام یک پلاگین 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 : سرعت اسکرول شدن رو مشخص میکنه. بر حسب میلی ثانیه هست.

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

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

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

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

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

  • ‏‏
    Mohsen Sh(۲۸ دی ۱۳۹۳)

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

    • ‏‏
      لقمان آوند(۲۹ دی ۱۳۹۳)

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

  • ‏‏

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

    • ‏‏
      محمد اسفندیاری(۳۱ اردیبهشت ۱۳۹۴)

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

      • ‏‏

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

        • ‏‏
          محمد اسفندیاری(۳۱ اردیبهشت ۱۳۹۴)

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

        • ‏‏

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

        • ‏‏
          محمد اسفندیاری(۲ خرداد ۱۳۹۴)

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

  • ‏‏

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

    • ‏‏
      محمد اسفندیاری(۲۸ خرداد ۱۳۹۴)

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

      • ‏‏

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

        • ‏‏
          محمد اسفندیاری(۲۸ خرداد ۱۳۹۴)

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

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

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

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

    ورود به سایت

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

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

    عبارت :