ساخت وب سایت های تمام صفحه با قابلیت اسکرول

کیانوش آسترکی ۰۸ دی ۱۳۹۸

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

fullPage.js یک پروژه متن باز است که می‌توانید آن را بصورت رایگان دانلود کنید و در پروژه‌های طراحی سایت حرفه ای خود مورد استفاده قرار دهید.

برای دانلود پلاگین می‌توانید به انتهای این مطلب مراجعه کرده و یا به سایت سازنده آن fullPage.js مراجعه کنید.

قرار دادن فایل‌های مورد نیاز در ‌HTML

برای استفاده از این پلاگین نیاز به کتابخانه jQuery دارید. دیگر فایل‌های مورد نیاز شامل یک فایل استایل دهی‌ CSS و دو فایل جاوا اسکریپت است.

<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>
<script src="vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.min.js"></script>

دقت کنید، ترتیب قرار گرفتن این فایل‌ها مهم است. پلاگین fullPge.js نیاز به کتابخانه jQuery دارد و تا وقتی که آن را قبل از آن قرار ندهید کار نخواهد کرد.

ساختار HTML مورد نیاز

برای اسکرول بصورت عمودی نیاز دارید از ساختار زیر استفاده کنید، که هر بخش دارای یک کلاس section است.

<div id="fullpage">
 <div class="section">Section 1</div>
 <div class="section">Section 2</div>
 <div class="section">Section 3</div>
</div>

در هر صفحه شما می‌توانید چند اسلاید هم بصورت افقی داشته باشید. که باید از کلاس slide برای عنصرهای این بخش استفاده کنید.

<div id="fullpage">
 <div class="section">Section 1</div>
 <div class="section">
  <div class="slide">Section 2 Slide 1</div>
  <div class="slide">Section 2 Slide 2</div>
  <div class="slide">Section 2 Slide 3</div>
 </div>
 <div class="section">Section 3</div>
</div>

مقدار دهی اولیه

حالا کافیست تابع پلاگین را فراخوانی کنیم. برای این کار خطوط زیر را در <head> سایت خود قرار می‌دهیم.

<script type="text/javascript">
 $(document).ready(function() {
  $('#fullpage').fullpage();
 });
</script>

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