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

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



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

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

13 3769 ۲۷ دی ۹۳

در این مطلب میخوام یک پلاگین 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(۲۸ دی ۱۳۹۳)

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

  • ‏‏

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

  • ‏‏

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram