معرفی و آموزش پلاگین FullPage.js

 معرفی و آموزش پلاگین FullPage.js 

اسکرول افقی و عمودی توسط پلاگین FullPage.js

 

بخش اول: مقدمه و معرفی پلاگین

FullPage.js Plugin Tutorial – Part 1

 

طراحی وب سایت های تک صفحه ای در این روزها طرفداران زیادی پیدا کرده است. به اصطلاح به اینگونه وب سایت ها Single-Page و یا One-Page می گویند. در این مقاله قصد داریم نحوه ایجاد یک وب سایت تک-صفحه ای را با استفاده از پلاگین FullPage.js را بیان کنیم. با مراجعه به وب سایت CodePen می توانید دموی وب سایتی که در این مقاله می خواهیم طراحی را مشاهده کنید و با مراجعه به وب سایت github سورس کد این وب سایت را دانلود کنید.

 

درباره پلاگین FullPage.js:

fullPage.js یک پلاگین جی کوئری است که برای ایجاد وب سایت های تک-صفحه ای (Single-Page) بکار برده می شود. توسط برنامه نویس وب، آقای Alvaro Trigo تولید و توسعه داده شده است. همانطور که در بخش های بعدی این مقاله خواهیم دید، پلاگین fullPage.js دارای امکانات و option های زیادی می باشد.

علاوه بر این، پلاگین fullPage.js دارای داکیومنت مفید و مفصلی می باشد که مثال هایی زیادی نیز در هر بخش دارد.

خبر خوش اینست که پلاگین fullPage.js علاوه بر اینکه در تمام مرورگرهای مدرن و جدید بخوبی کار می کند، در مرورگرهای نسبتا قدیمی مانند IE ورژه ۸ و OPERA ورژن ۱۲ نیز کار می کند.

برای مشاهده و دانلود نسخه وردپرس پلاگین fullPage.js به وب سایت WordPress.org مراجعه شود.

 

شروع به کار با fullPage.js:

برای شروع کار با پلاگین fullPage.js ابتدا باید فایل های زیر را دانلود کرده و به صفحه وب خود اضافه کنید:

  • کتابخانه جی کوئری نسخه بالاتر از ۱٫۶ (jQuery > 1.6.0)
  • فایل jquery.fullpage.css
  • فایل jquery.fullpage.js و یا فایل  فشرده آن ( jquery.fullpage.min.js )

 

برای دانلود فایل های فوق، به وب سایت gitHub مراجعه فرمائید. روش دیگر برای نصب پلاگین fullPage.js بر روی وب سایت، استفاده از package manager ها مانند bower می باشد. روش دیگری که می توانید در این زمینه بکار بگیرید، فراخوانی فایل های مذکور از cdn (بصورت زیر) می باشد:

 

فایل css پلاگین fullPage.js:

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.css" rel="stylesheet" />

و فایل جاوااسکریپت پلاگین fullPage.js و کتابخانه جی کوئری:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.6.6/jquery.fullPage.min.js"></script>

نکته: فایل css پلاگین را در قسمت head صفحه وب خود بیافزائید و فایل های جاوااسکریپت را در قبل از تگ بسته body یعنی </body> درج کنید.

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

»»» مطالعه مقالات آموزشی CSS توصیه می شود.

 

بخش دوم: طراحی بخش‌های تمام‌صفحه و اسلایدها

FullPage.js Plugin Tutorial – Part 2

 

در بخش قبل، پلاگین fullPage.js را معرفی کردیم و تنظیمات اولیه و پیش نیازهای راه اندازی این پلاگین را بیان کردیم. در بخش دوم از آموزش پلاگین fullPage.js، چگونگی طراحی و ایجاد بخش های تمام صفحه (Full-Width Sections) و ایجاد اسلایدهای افقی و نیز تنظیمات ظاهر سایت را بیان خواهیم کرد.

 

طراحی بخش‌های تمام صفحه (Full-Width Sections):

در ابتدا ما باید بخش های وب سایت خود را مشخص کنیم. بخش های مختلف وب سایت خود را با المان section تعریف کرده ایم و تمام این section ها را درون یک div با id=fullpage قرار داده ایم. زیرا در آینده می خواهیم از این div در تنظیمات پلاگین fullPage استفاده کنیم. بطور پیش فرض، پلاگین fullPage.js اولین section را بعنوان بخش فعال (active section) در نظر می گیرد. اما اگر ما بخواهیم می توانیم بخش فعال و پیش فرض را تغییر دهیم. فقط کافیست برای بخش دلخواه خود، کلاس active را تعریف کنیم. کد html صفحه وب ما تا بدین جا بصورت زیر است:

 

<div id="fullPage">

    <section class="vertical-scrolling">

        <h2>fullPage.js</h2>

        <h3>This is the first section</h3>

        <div class="scroll-icon">

            <p>Jump into the last slide</p>

            <a href="#fifthSection/1" class="icon-up-open-big"></a

        </div>

    </section>

    <section class="vertical-scrolling">

        <!– content here –>

    </section>

    <section class="vertical-scrolling">

        <!– content here –>

    </section>

    <section class="vertical-scrolling">

        <!– content here –>

    </section> 

    <section class="vertical-scrolling">

        <!– content here –>

    </section>

</div>

 

همانطور که مشاهده می شود، تمام section ها دارای کلاس vertical-scrolling می باشند. بنابراین در تنظیمات اولیه پلاگین fullpage.js می توانید بجای section ، افکت های پارالاکس را بر روی کلاس .vertical-scrolling تعریف کنید.

 

ایجاد اسلایدهای افقی (Horizontal Slides):

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

 

<section class="vertical-scrolling">

    <div class="horizontal-scrolling">

        <h2>fullPage.js</h2>

        <h3>This is the fifth section and it contains the first slide</h3>

    </div>

    <div class="horizontal-scrolling">

        <h2>fullPage.js</h2>

        <h3>This is the second slide</h3>

        <p class="end">Thank you!</p>

    </div>

</section>

 

در بخش بالا، ما برای تعریف اسلایدهای افقی، از کلاس دلخواه horizontal-scrolling استفاده کرده ایم. در آینده از این کلاس برای تعریف اسلایدهای افقی این بخش استفاده خواهیم کرد.

 

تنظیمات ظاهر وب سایت (Site Appearance):

ما می توانید بر روی بخش های وب سایت و اسلایدهای هریک، ظاهر دلخواه خود را توسط تنظیمات و پیکربندی های موجود، اعمال کنیم. یکی از این تنظیمات در دسترس، پارامتری بنام sectionColor است که روش ساده ایست برای تعریف رنگ background-color (پس زمینه) برای هر بخش (section).

علاوه بر آن، شما می توانید استایل های دلخواه خود را برای سفارشی سازی بخش های مختلف وب سایت و اسلایدهای آنها تعریف کنید. بعنوان مثال، فرض کنید شما می خواهید برای بخش دوم (second section) یک تصویر را بعنوان تصویر پس زمینه بصورت تمام صفحه (full-width background) تعریف کنید. کد زیر را در نظر بگیرید:

section:nth-of-type(2) {
        background: url('https://unsplash.it/1910/1221?image=626') no-repeat center;
        background-size:cover;
    }

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

 

 در بخش قبل، ایجاد بخش های full-width و اسلایدهای افقی و تنظیمات ظاهر وب سایت را بیان کردیم. در بخش سوم از آموزش FullPage، نحوه سفارشی سازی منوی اسکرول، ایجاد لینک به بخش ها و اسلایدهای سایت را بررسی خواهیم کرد.

 

بخش سوم: سفارشی‌سازی منوی اسکرول

FullPage.js Plugin Tutorial – Part 3

 

سفارشی‌سازی منوی اسکرول (Custom Navigation):

پلاگین fullPage.js تنظیمات زیادی را برای حرکت بین بخش ها و اسلایدها به شما پیشنهاد می دهد. برخی از این تنظیمات بطور پیش فرض فعال هستند (بعنوان مثال قابلیت استفاده از Mouse Wheel و صفحه کلید برای انجام اسکرول) اما برخی از این قابلیت ها را باید بطور دستی در اسکریپت راه اندازی (initial setup) این پلاگین تعریف کنید (مانند نمایش نقطه های دایره ای شکل).

در وب سایت این آموزش، می خواهیم منوی مجزایی به شکل دایره طراحی و پیاده سازی کنیم. استایل های زیر را در نظر بگیرید:

 

#fp-nav ul li a span,

.fp-slidesNav ul li a span {

    background: white;

    width: 8px;

    height: 8px;

    margin: -4px 0 0 -4px;

}

      

#fp-nav ul li a.active span,

.fp-slidesNav ul li a.active span,

#fp-nav ul li:hover a.active span,

.fp-slidesNav ul li:hover a.active span {

    width: 16px;

    height: 16px;

    margin: -8px 0 0 -8px;

    background: transparent;

    box-sizing: border-box;

    border: 1px solid #24221F;

}

 

تصویر منوی دایره ای شکل اسکرول به شکل زیر خواهد بود:

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

 

منوی سمت چپ تصویر، حالت پیش فرض آنرا نمایش می دهد و با تعریف استایل های فوق، تصویر منوی سمت راست را خواهیم داشت. دقت کنید که استایل های خود را در یک فایل جداگانه مثلا با عنوان custom.css تعریف کنید و به هیچ وجه استایل های پیش فرض پلاگین fullPage را تغییر ندهید.

 

ایجاد لینک به بخش‌ها و اسلایدهای آنها (Links to Sections & Slides):

 

پارامتر anchors:

پلاگین fullPage.js به ما این امکان را می دهد که بهنگام اسکرول بین بخش های مختلف یک صفحه پارالاکس، URL وب سایت را تغییر دهیم. بدین منظور از پارامتر anchors استفاده می کنیم. این پارامتر آرایه ای از لینک های anchor است که باید در URL صفحه، برای هر بخش (section) نمایش داده شود. بعنوان نمونه، در مثال این مقاله، لینک های anchor زیر را برای بخش های مختلف درنظر گرفته ایم (که باید منحصر بفرد و یکتا باشند):

anchors: [‘firstSection’, ‘secondSection’, ‘thirdSection’, ‘fourthSection’, ‘fifthSection’]

پس از تعریف anchor های فوق، با اسکرول به بخش اول، عبارت #firstSection در انتهای URL صفحه وب درج خواهد شد و با ورود به بخش دوم، #secondSection در انتهای آدرس صفحه مشاهده خواهد شد.

 

ترتیب نمایش اسلایدها در fullpageJs:

به همین ترتیب، پلاگین fullPage برای هر اسلایدی که ممکن است در هر بخش باشد نیز آدرس مجزایی درنظر می گیرد. بخاطر داشته باشید که برای اسلاید اول (first slide) ایندکس ۰ در نظر گرفته می شود. برای روشن شدن قضیه فرض کنید در بخش پنجم از یک وب سایت تک-صفحه ای پارالاکس هستید و اسلاید دوم فعال است. URL صفحه به عبارت #fifthSection/1 ختم خواهد شد. بطور پیش فرض، ایندکس ۰ برای اسلاید اول نمایش داده نمی شود.

برای تغییر ایندکس های پیش فرض اسلایدها در پلاگین fullPage می توانید از اتریبیوت data-anchor استفاده کنید. بدین صورت که مثلا اگر بخواهید برای اسلاید اول عبارت first-slide بجای عدد ۰ نمایش داده شود، باید بصورت زیر تعریف شود:

<div class="horizontal-scrolling" data-anchor="firstSlide"></div>

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

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

در بخش چهارم و پایانی از آموزش پلاگین fullPage.js لینک کردن منو به بخش ها و اسلایدها، تعریف callback برای بخش های وب سایت و تعریف callback برای اسلایدهای وب سایت تک صفحه ای را بررسی خواهیم کرد.

 

بخش چهارم: لینک کردن منو

FullPage.js Plugin Tutorial – Part 4

 

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

 

لینک کردن منو به بخش‌ها و اسلایدها (Linking Menu to Sections & Slides):

برای یادگیری بهتر چگونگی لینک کردن منو به بخش ها و اسلایدها، لطفا ابتدا به هدر ثابت (fixed header) وب سایت این مقاله در تصویر زیر دقت کنید:

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

 

و کد HTML آن نیز بصوررت زیر است:

<div class="header-top clearfix">

    <h1 class="l-left">

        <a href="#firstSection">Your Logo</a>

    </h1>

    <a class="l-right toggle-menu" href="#">

        <i></i>

        <i></i>

        <i></i>

    </a>

</div>

با کلیک بر روی منوی همبرگری در بالای صفحه سمت راست، یک منوی افقی بصورت overlay روی صفحه وب نمایش داده می شود.

منوی افقی بصورت overlay روی صفحه وب

کد html مربوط به منوی فوق:

<nav class="hide">

    <ul id="menu">

        <li data-menuanchor="firstSection">

            <a href="#firstSection" title="First Section">First Section</a>

        </li>

        <li data-menuanchor="secondSection">

            <a href="#secondSection" title="Second Section">Second Section</a>

        </li>

        <!– more list items here –>

    </ul>

</nav>

 

در ابتدا به المان ul منوی هدر، آیدی menu را اختصاص داده ایم. برای هر li واقع در این ul باید اتریبیوت data-menuanchor تعریف کنیم که مقدار آن برابر با ID بخش موردنظر (مانند secondSection). هنگامی که به هر بخش اسکرول می کنیم، منوی مربوط به آن بخش به حالت فعال در می آید و پلاگین fullPage.js کلاس active را به آن منو (li) اعمال می کند.

حالت فعال منوی افقی

 

تعریف CallBack برای بخش های وب سایت:

هنگامی که یک بخش (section) فعال می شود، متد afterload فراخوانی می شود و بهنگام ترک آن بخش، متد onLeave صدازده می شود.

در دموی این مقاله، با اسکرول به بخش پنجم، منوی دایره ای شکل سمت راست مخفی می شود و آنرا نمایش نمی دهیم.

تعریف CallBack برای بخش های وب سایت

پنهان کردن منوی دایره ای از دید کاربر، هنگامی که به بخش پنجم می رسد، را با استفاده از متدهای onLeave و afterload انجام داده ایم. بصورت زیر:

afterLoad: function(anchorLink, index) {

    if (index == 5) {

        $('#fp-nav').hide();

    }

}

onLeave: function(index, nextIndex, direction) {

    if(index == 5) {

        $('#fp-nav').show();

    }

}

تعریف CallBack برای اسلایدهای وب سایت:

متد afterSlideLoad پس از نمایش یک اسلاید و متد onSlideLeave به محض ترک یک اسلاید فراخوانی می شود. ما در مثال این مقاله می خواهیم تغییراتی را در نحوه کارکرد وب سایت به محض نمایش و فعال شدن اسلاید دوم از بخش آخر انجام دهیم. بعنوان مثال قصد داریم اولا وقتی اسلاید دوم فعال شد، امکان اسکرول به سمت بالا را غیرفعال کنیم و دوما رنگ پس زمینه (background-color) اسلاید دوم به محض نمایش این اسلاید عوض شود و تکستی بعنوان Thank you به کاربر نمایش داده شود.

برای پیاده سازی سنایوی فوق، متدهای afterSlideLoad و onSlideLeave را بصورت زیر تعریف می کنیم:

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {

    if(anchorLink == 'fifthSection' && slideIndex == 1) {

        $.fn.fullpage.setAllowScrolling(false, 'up');

        $(this).css('background', '#374140');

        $(this).find('h2').css('color', 'white');

        $(this).find('h3').css('color', 'white');

        $(this).find('p').css({

            'color': '#DC3522',

            'opacity': 1,

            'transform': 'translateY(0)'

        });

    }

}

onSlideLeave: function( anchorLink, index, slideIndex, direction) {

    if(anchorLink == 'fifthSection' && slideIndex == 1) {

        $.fn.fullpage.setAllowScrolling(true, 'up');

    }

}

مقداردهی اولیه و راه اندازی پلاگین fullPage.js:

بعنوان قدم آخر باید پلاگین fullPage.js را برای المان موردنظرمان فعال کنیم و بصورت زیر، متغیرهایی که برای بخش ها و اسلایدها و… تعریف کرده ایم را به پلاگین fullPage.js معرفی کنیم:

$('#fullpage').fullpage({

    sectionSelector: '.vertical-scrolling',

    slideSelector: '.horizontal-scrolling',

    controlArrows: false

    // more options here

});

نتیجه گیری:

در این آموزش، یاد گرفتیم که چگونه توسط پلاگین fullPage.js یک وب سایت تک-صفحه ای (single-page) بصورت تمام-صفحه (full-page) و با قابلیت اسکرول به بخش های مختلف، را طراحی و پیاده سازی کنیم. لطفا در نظر داشته باشید که این نوع از وب سایت نمی تواند برای طراحی انواع وب سایت مناسب باشد. بعنوان مثال این نوع طراحی می تواند برای وب سایت های داینامیک (که داده های خود را از دیتابیس می گیرند) نامناسب باشد. برخلاف رابط کاربری جذابی که دارد، سفارشی سازی و دستکاری آن می تواند دردسر ساز و مشکل باشد. علاوه بر آن، وب سایت هایی که بدین گونه طراحی و پیاده سازی می شوند، می توانند از نظر سئو (SEO) دچار مشکل شوند.

 

منبع: https://webdesign.tutsplus.com/articles/vertical-and-horizontal-scrolling-with-fullpagejs–cms-24215


برچسب‌ها:

آموزش fullpage.jsاسکرول افقی و عمودیپلاگین FullPage.jsتعریف CallBackفایل css پلاگین fullpageقالب تک صفحه‌ایمعرفی FullPage.jsوب سایت تک صفحه‌ای

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

15 + دوازده =