استارت‌آپ و کارآفرینی

معرفی پلاگین fullPage.js

شاید وب سایت های زیادی رو دیده باشید که حالت اسلاید مانند دارند و با اسکرول کردن, یک صفحه کامل به پایین یا جهت های دیگر می‌رود، یک نمونه از این وب سایت‌ها، شبکه اجتماعی فلیکر هست. اکثر این وب سایت‌ها با چیزی مشابه پلاگین fullPage.js ساخته شده‌اند که در این مطلب قصد دارم روش استفاده از اون رو توضیح بدم.

برای تهیه این پلاگین می‌توانید به وب سایت سازنده‌اش مراجعه کنید : وب سایت سازنده صفحه گیت هاب

بعد از تهیه کردن پلاگین باید فایل های جاوااسکریپت و css رو به کد HTML اضافه کنید:

<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

بعد از اضافه کردن فایل‌ها، حالا نوبت به نوشتن تگ‌های HTML میرسه:

<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

آخرین مرحله هم مربوط به صدا کردن پلاگین هست:

$(document).ready(function() {
    $('#fullpage').fullpage();
});

همین! تمام شد.

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

2 نظرات
  1. آرمیشا می گوید

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

  2. حسین ت.ز می گوید

ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.