Advertisement
  1. Web Design
  2. fullPage.js

fullPage.js দিয়ে উল্লম্ব এবং অনুভূমিক স্ক্রলিং

Scroll to top
Read Time: 9 min

Bengali (বাংলা) translation by Nazmul Shuvo (you can also view the original English article)

এখনকার দিনে অধিকতরভাবে সাইটগুলি সিঙ্গেল-পেইজ ভিত্তিক (সিঙ্গেল-পেইজ অথবা ওয়ান-পেইজ সাইট নামে পরিচিত)। এই আর্টিকেল এ, fullPage.js এর সুবিধা নিয়ে কিভাবে একটি ডেমো সাইটের অভিজ্ঞতা অর্জন করা যায় আমরা তা অনুসন্ধান করব।

আমরা যা বানাতে যাচ্ছি তা এই Codepen ডেমোটিতে দেখুন। উপরন্তু, এই ডেমোর সকল ফাইলগুলি এই Github রিপোসিটরিতে পাওয়া যাবে।

fullPage.js কি?

fullPage.js একটি jQuery ভিত্তিক প্লাগইন যা আমাদের এক-পাতার স্ক্রলিং ওয়েবসাইট তৈরি করতে সাহায্য করে। এটি তৈরি করেছে ওয়েব ডেভেলপার Alvaro Trigo, আমরা আসন্ন সেকশনগুলোতে দেখতে পাবো, এটি বিভিন্ন ধরনের কাস্টমাইজেশন এর অপশনের সাথে এসেছে।

তার উপর, এই প্লাগইনটি সরাসরি উদাহরনের সাথে সুগঠিত ডকুমেন্টেশন দিচ্ছে।

খুশির কথা এই যে, এটি শুধু মডার্ন ব্রাউজারগুলোতেই কাজ করে না, কিছু পুরাতন ব্রাউজারেও কাজ করে যেমন IE 8 এবং Opera 12।

ফাইনালি, আপনি হয়ত এটির ওয়ার্ডপ্রেস ভার্সন দেখতে চাইবেন।

fullPage.js দিয়ে শুরু করা

fullPage দিয়ে শুরু করতে, আপনার প্রজেক্টে নিচে দেখানো ফাইলগুলি ডাউনলোড এবং ইন্সটল করতে হবেঃ

  • jQuery লাইব্রেরি (≥1.6.0)
  • jquery.fullPage.css CSS ফাইল
  • jquery.fullPage.js JS ফাইলটি অথবা এটার মিনিফাইড ভার্সন (jquery.fullPage.min.js)

আপনি ফাইলগুলোর একটি কপি পাবেন Github repo তে ভিজিট করে, একটি প্যাকেজ ম্যানেজার ব্যবহার করে (যেমনঃ Bower), অথবা একটি CDN (যেমনঃ cdnjs) এর মাধ্যমে প্রয়োজনীয় এসেট লোড করে। এই টিউটোরিয়ালের জন্য, আমরা শেষের অপশনটি বেছে নিচ্ছি।

CSS ফাইলটির একটি লিংক HTML ডকুমেন্টের <head> এর মধ্যে স্থাপন করুনঃ

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

... এবং JS স্ক্রিপ্টের টি <body> ট্যাগ শেষ হওয়ার পূর্বেঃ

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

এখন, আমরা প্লাগইন এর গভীরে দেখার জন্য প্রস্তুত!

ফুল পেইজ সেকশন তৈরি

প্রথমে, আমাদের সাইটের সেকশনগুলি স্পেসিফাই করতে হবে। এটি করতে, আমরা section এ ক্লাস নির্দিষ্ট করে দিবো এলিমেন্টগুলি টার্গেট করার জন্য এবং তাদের একটি কন্টেইনার এ মোড়াবো যার একটি ইউনিক আইডেন্টিফাইয়ার থাকবে। পরবর্তীতে, এই আইডেন্টিফাইয়ার টি fullPage এর একটি দৃষ্টান্ত শুরু করতে ব্যবহার করা হবে। 

ডিফল্টভাবে, প্লাগইন প্রথম একটি সেকশনকে একটিভ বলে বিবচনা করে। কিন্তু আমরা যদি চাই, সেই ধর্মকে আমরা পরিবর্তন করতে পারবো আকাঙ্ক্ষিত সেকশনে একটি active ক্লাস যোগ করে।

আমাদের উদাহরণের জন্য এখানে অবশ্যক HTML গঠনটিঃ

1
<div id="fullPage">
2
    <section class="vertical-scrolling">
3
        <h2>fullPage.js</h2>
4
        <h3>This is the first section</h3>
5
        <div class="scroll-icon">
6
            <p>Jump into the last slide</p>
7
            <a href="#fifthSection/1" class="icon-up-open-big"></a
8
        </div>
9
    </section>
10
    <section class="vertical-scrolling">
11
        <!-- content here -->
12
    </section>
13
    <section class="vertical-scrolling">
14
        <!-- content here -->
15
    </section>
16
    <section class="vertical-scrolling">
17
        <!-- content here -->
18
    </section>  
19
    <section class="vertical-scrolling">
20
        <!-- content here -->
21
    </section> 
22
</div>

লক্ষ করবেন যে সকল সেকশন একটি কমন ক্লাস নেম শেয়ার করছে (যেমনঃ vertical-scrolling) যা আমরা পুনঃনির্ধারিত একটি হতে ভিন্ন কিছু নির্বাচন করেছি (যেমনঃ section) ঘটনা হচ্ছে, আমাদের প্লাগইন কে এই পরিবর্তন সম্পর্কে প্রারম্ভিক প্রক্রিয়ায় জানাতে হবে। 

অনুভূমিক স্লাইড তৈরি

প্রতিটা অনুভূমিক স্তুপীকৃত সেকশন ঐচ্ছিকরূপে একটি অথবা অধিক স্লাইড নিয়ে একটি অনুভূমিক স্লাইডার হতে পারে। এই স্লাইডগুলি সনাক্তকরণের জন্য, আমরা টার্গেট এলিমেন্টে slides ক্লাসটি এপ্লাই করব এবং তাদেরকে অনুরূপ সেকশনের সাথে নেস্ট করব।

অধিকন্ত, এটি উল্লেখ না করলেই নয় যে, টেকনিক্যালি বলতে গেলে, প্রথম স্লাইডটিকে মূল সেকশন বললেই চলে। আমরা শীঘ্রই এই আচরণ পরীক্ষা করব!

উদাহরণে ফিরে আসলে, নিচের কোড স্নিপেট দেখাচ্ছে যে কিভাবে আমরা পঞ্চম সেকশনে দুটি স্লাইড সেট করবঃ 

1
<section class="vertical-scrolling">
2
    <div class="horizontal-scrolling">
3
        <h2>fullPage.js</h2>
4
        <h3>This is the fifth section and it contains the first slide</h3>
5
    </div>
6
    <div class="horizontal-scrolling">
7
        <h2>fullPage.js</h2>
8
        <h3>This is the second slide</h3> 
9
        <p class="end">Thank you!</p>
10
    </div>
11
</section>

আবার, আপনি দেখতে পাচ্ছেন যে, আমরা আমাদের স্লাইডে একটি কাস্টম ক্লাস নেম দিয়েছি (যেমনঃ horizontal-scrolling)

সাইটের এপিয়ারেন্স নিয়ন্ত্রণ 

আমরা আমাদের সেকশনের এপিয়ারেন্স নিয়ন্ত্রণ করতে পারি এবং ব্যবহারযোগ্য প্যারামিটার কনফিগার এর মাধ্যমে বাড়তি সুবিধা নিয়ে স্লাইড করতে পারি। তাদের মধ্যে একটি প্যারামিটার হচ্ছে sectionColor প্রপার্টি যা আমাদের প্রতিটা CSS background-color প্রপার্টি নির্ধারনের একটি সহজ পথ দিচ্ছে।

তারউপর, আমরা অধিকতর কাস্টমাইজ করার জন্য আমাদের নিজেদের CSS সেট করতে পারব। উদাহরণস্বরূপ, মনে করুন যে আমাদের দ্বিতীয় সেকশনে আমরা একটি ফুল ব্যাকগ্রাউন্ড ইমেজ এপ্লাই করতে চাই। আমরা যেভাবে এটি সম্পূর্ণ করতে পারিঃ

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

ন্যাভিগেশন অপশনগুলো কাস্টমাইজ করা

সেকশন এবং স্লাইডগুলির মধ্যে স্থানান্তরের জন্য এই প্লাগইনের অনেক বিল্ট-ইন অপশন্স আছে। তাদের মধ্যে কিছু ডিফল্টভাবে এক্টিভেটেড থাকে (যেমনঃ মাউস হুইল এবং কিবোর্ড), যখন অন্যসব অবজেক্ট কনফিগারেশনের মাধ্যমে ম্যানুয়ালি ট্রিগার করা হয় (যেমনঃ সার্কেল ডটস)।

আমাদের প্রজেক্টে, আমরা অতিরিক্ত ন্যাভিগেশন  ডট ফর্মে যোগ করতে চাই। উপরন্তু, আমরা বাম এবং ডানদিকের এরোগুলি আড়াল করবো যা সাধারণভাবে স্লাইডারে দৃশ্যমান। তাই, ডট ন্যাভিগেশন এনাবল করার পরে, ডিফল্ট স্টাইলিং ওভাররাইট এর মাধ্যমে আমরা এর চেহারা পরিবর্তন করতে পারব। এখানে নতুন রুলগুলোঃ

1
#fp-nav ul li a span, 
2
.fp-slidesNav ul li a span {
3
    background: white;
4
    width: 8px;
5
    height: 8px;
6
    margin: -4px 0 0 -4px;
7
}
8
     
9
#fp-nav ul li a.active span, 
10
.fp-slidesNav ul li a.active span, 
11
#fp-nav ul li:hover a.active span, 
12
.fp-slidesNav ul li:hover a.active span {
13
    width: 16px;
14
    height: 16px;
15
    margin: -8px 0 0 -8px;
16
    background: transparent;
17
    box-sizing: border-box;
18
    border: 1px solid #24221F;
19
}

এবং নিচে একটি স্ক্রিনশট যা আমাদের করা পরিবর্তনগুলি দৃশ্যায়িত করছেঃ 

default vs custom stylesdefault vs custom stylesdefault vs custom styles
ডিফল্ট বনাম কাস্টম স্টাইল

মনে রাখবেন যে আমরা উপরের রুলগুলি আমাদের কাস্টম স্টাইলশিটে অন্তর্ভুক্ত করেছি, অতএব প্লাগইন এর CSS ফাইল পরিবর্তন থেকে দূরে থাকুন।

সেকশন এবং স্লাইডগুলিতে লিংক তৈরি করা

fullPage.js আমাদের স্ক্রল করে বিভিন্ন সেকশনে যাওয়ার সময় URL পরিবর্তন করতে সাহায্য করে। তা করতে, আমরা anchors প্যারামিটারটি ব্যবহার করি। আরো সুস্পষ্টভাবে, anchor লিংকগুলি ধরে রাখার জন্য এই প্যারামিটার একটি array যা আমাদের URL অনুযায়ী প্রতিটা সেকশন প্রদর্শিত করবে। এই ক্ষেত্রে, আমাদের উদাহরণে আমরা নিম্নে প্রদর্শিত anchor লিংক নির্দিষ্ট করেছি (যা ইউনিক হতে হবে):

1
anchors: ['firstSection', 'secondSection', 'thirdSection', 'fourthSection', 'fifthSection']

এটি হয়ে গেছে, আমরা যখন প্রথম সেকশনটি ভিজিট করব, সাইট URL এর শেষে #firstSection শনাক্তকারী হিসেবে থাকবে, দ্বিতীয় URL শেষ হবে  #secondSection এ এবং এভাবে চলতে থাকবে।

একই ভাবে, স্লাইডগুলিতে স্ক্রলের সময় প্লাগিন URL গুলিও পরিবর্তন করতে থাকবে। এই সময়ে, আমাদের মনে রাখতে হবে যে মূলত প্রথম স্লাইড (যার ইনডেক্স ০) ই সংশ্লিষ্ট প্যারেন্ট সেকশন। সাথে মনে রাখতে হবে যে, আমাদের প্রজেক্টে যখন আমরা পঞ্চম সেকশনের প্রথম স্লাইডে থাকবো, URL টি #fifthSection anchor লিংকে শেষ হবে। একই সেকশনের দ্বিতীয় স্লাইড লোডের ক্ষেত্রে আমরা একটি URL ট্রিগার  করব যা #fifthSection/1 এ শেষ হবে কারন দ্বিতীয় স্লাইডটি (যার ইন্ডেক্স ১) আসলে আমাদের "প্রথম" স্লাইড

এটি উল্লেখযোগ্য যে আমাদের স্লাইডগুলির জন্য আমরা anchor গুলি পরিবর্তন করতে পারি data-anchor এট্রিবিউট এর সাথে পছন্দের anchor নাম (যা ইউনিক হতে হবে) যোগ করে, ঠিক নিচের উদাহরণটির মতঃ 

<div class="horizontal-scrolling" data-anchor="firstSlide"><!-- more content here --></div>

নোটঃ  আপনার স্ক্রলের সাথে URL গুলির পরিবর্তন হচ্ছে দেখতে, আমাদের ডেমোর ডিবাগ ভিউ চেক করুন।

মেনু থেকে সেকশন এবং স্লাইডগুলি লিংক করা

fullpage এ আমরা কিভাবে একটি মেনু লিংক করবো তা আরো ভালভাবে বুঝতে চলুন আমাদের ফিক্সড হেডারটি দেখে নেই। নিচের স্ক্রিনশটটি দেখাচ্ছে এটি কিভাবে প্রদর্শিত হবেঃ 

এবং HTML:

1
<div class="header-top clearfix">
2
    <h1 class="l-left">
3
        <a href="#firstSection">Your Logo</a>
4
    </h1>
5
    <a class="l-right toggle-menu" href="#">
6
        <i></i>
7
        <i></i>
8
        <i></i>
9
    </a>
10
</div>

যখনি হ্যামবার্গার মেনু আইকন ট্রিগার করা হবে, প্রধান মেনুর প্রলেপ প্রদর্শিত হবেঃ

এই মেনু সংশ্লিষ্ট কোডগুলো এখানেঃ

1
<nav class="hide">
2
    <ul id="menu">
3
        <li data-menuanchor="firstSection">
4
            <a href="#firstSection" title="First Section">First Section</a>
5
        </li>
6
        <li data-menuanchor="secondSection">
7
            <a href="#secondSection" title="Second Section">Second Section</a>
8
        </li>
9
        <!-- more list items here -->
10
    </ul>
11
</nav>

তাই, fullPage কে মেনু সম্পর্কে জানাতে, আমাদের menu সঠিকভাবে কনফিগার করে রেজিস্টার করতে হবে। পরবর্তীতে আমাদের মেনুর আইটেমগুলি সম্পর্কিত সেকশনগুলির সাথে লিংক করতে হবে। এটি করতে, আমরা data-menuanchor এট্রিবিউট টি আমাদের আইটেমগুলির নিজ নিজ লিংকের সাথে ভ্যালু হিসেবে যোগ করেছি। যখনি সেই ভ্যালুগুলি মিলবে, প্লাগইনটি অনুরূপ মেনু আইটেম এ active ক্লাস (আমাদের স্ক্রলের সাথে) যোগ করবে।

মনে রাখবেন যে প্লাগইনটি এখনো স্লাইডে active ক্লাস যুক্ত করেনি। এটি ফিক্স করতে, আমরা হয় jQuery (সর্বোত্তম সমাধান) অথবা CSS ব্যবহার করতে পারি। আমাদের উদাহরণে, আমরা এই সমস্যার সমাধান করেছি নিচে দেখানো CSS রুল যোগ করেঃ

1
body.fp-viewing-fifthSection-1 #menu li:last-child a {
2
    background: #453659;
3
}

ফলাফল নিচে দেখুনঃ

আসলে, আমরা দ্বিতীয় স্লাইডে active ক্লাসটি যোগ করিনি। ভিন্ন body ক্লাসের বাড়তি সুবিধা নিয়ে প্লাগইন প্রতিটা সেকশন এবং স্লাইডের সাথে যুক্ত হচ্ছে, আমরা কেবল এই আইটেম টিকে active ক্লাসের স্টাইলগুলি দিয়েছি।

নোটঃ এই মেনু কিভাবে কাজ করে তার উপর আমরা আর ফোকাস করব না কারন এটি এই টিউটোরিয়ালের উদ্দেশ্যের বাইরে।

সেকশনগুলির জন্য কলব্যাকগুলি ফায়ারিং

দ্বিতীয় সেকশনটি লোড হওয়ার পড়ে afterLoad কলব্যাকটি এবং ব্যবহারকারী ত্যাগ করলে onLeave কলব্যাকটি বহিষ্কৃত হয়।

আমাদের প্রজেক্টে, যখন পঞ্চম সেকশন লোড হবে তখন আমরা ভার্টিকেল ডট ন্যাভিগেশনটি লুকায়িত করবঃ

সেকশন৪, তারপরে সেকশন৫ কোন ডট ছাড়া

এখানে যেভাবে আমরা এটি সম্পাদন করেছিঃ

1
afterLoad: function(anchorLink, index) {
2
    if (index == 5) {
3
        $('#fp-nav').hide();
4
    }
5
}
6
7
onLeave: function(index, nextIndex, direction) {
8
    if(index == 5) {
9
        $('#fp-nav').show();
10
    }
11
}

স্লাইডগুলির জন্য কলব্যাকগুলির ফায়ারিং

একটি স্লাইড লোড হয়ে গেলে afterSlideLoad কলব্যাকটি এবং ব্যবহারকারী যখন এটি ছেড়ে যায় তখন onSlideLeave কলব্যাকটি ট্রিগার হয়।

আমাদের ক্ষেত্রে, দ্বিতীয় স্লাইডে আমরা কিছু সংখ্যাক ডিফারেন্ট একশন কার্যকর করব। উদাহরণস্বরূপ, স্লাইড লোড হয়ে গেলে আমরা উপরে স্ক্রলের  সম্ভাবনাকে অযোগ্য করে দিবো। সেই সাথে, আমরা স্লাইডের background-color প্রোপার্টি পরিবর্তন করব পাশাপাশি এর অন্তর্গত এলিমেন্টগুলির এপিয়ারেন্স ও।

আমাদের ব্যবহৃত কোডের অংশ নিচে প্রদর্শিত হলঃ

1
afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex) {
2
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
3
        $.fn.fullpage.setAllowScrolling(false, 'up');
4
        $(this).css('background', '#374140');
5
        $(this).find('h2').css('color', 'white');
6
      $(this).find('h3').css('color', 'white');
7
	    $(this).find('p').css({
8
            'color': '#DC3522',
9
            'opacity': 1,
10
            'transform': 'translateY(0)'
11
        });
12
    }
13
}
14
    
15
onSlideLeave: function( anchorLink, index, slideIndex, direction) {
16
    if(anchorLink == 'fifthSection' && slideIndex == 1) {
17
        $.fn.fullpage.setAllowScrolling(true, 'up');
18
    }
19
}

প্লাগইন কার্জকর করা

fullPage এর ফাংশনালিটি ট্রিগারের জন্য এটি সর্বশেষ প্রয়োজনীয় ধাপ । এখানে, আমরা কনফিগারেশন অবজেক্ট হিসেবে আমাদের সকল কাস্টমাইজেশনগুলি পাস করি।  সংশিষ্ট কোড স্নিপেট নিচে দেখুনঃ 

1
$('#fullpage').fullpage({
2
    sectionSelector: '.vertical-scrolling',
3
    slideSelector: '.horizontal-scrolling',
4
    controlArrows: false
5
    // more options here

6
});

উপসংহার

এই টিউটোরিয়ালে, আমরা fullPage.js jQuery প্লাগইনটির দ্রুত যাত্রা পার করেছি এবং শিখেছি কিভাবে রেস্পন্সিভ full-page স্ক্রলিং সাইট বানাতে হয়। এটি বোঝা খুবই গুরুত্বপূর্ণ যে এই ধরনের ওয়েবসাইট সকল ক্ষেত্রে মানানসই নয়। তাদের আকর্ষণীয় ডিজাইনের পাশাপাশি, তাদের অনেক সীমাবদ্ধতা রয়েছে এবং তাদের মেইনটেইন করা খুবই কঠিন হতে পারে, বিশেষ করে ডায়নামিক সাইটগুলির  জন্য। সেইসাথে, এটি SEO এর সাথে জটিলতা তৈরি করতে পারে।

পরবর্তী ধাপসমূহ

আপনি যদি প্লাগইনটি গবেষণার জন্য ডেমো সাইট টি ভিত্তি হিসেবে ব্যবহার করতে চান, আমি আপনাকে নিচের চ্যালেঞ্জগুলি সাজেস্ট করবঃ

  • প্রজেক্টের মধ্যে চমৎকার animate.css লাইব্রেরী টি অন্তর্ভুক্ত করুন এবং স্ক্রল-ভিত্তিক অ্যানিমেশন তৈরির চেষ্ঠা করুন।
  • আপনার jQueryর অভিজ্ঞতা ব্যবহার করে দ্বিতীয় স্লাইডে active ক্লাসটি সক্রিয় করুন (সেকশন এবং স্লাইডের সেকশনে মেনুর লিংকিং দেখুন)।

ফাইনালি, আপনার যদি এক-পাতার ওয়েবসাইট সম্পর্কিত কোন অভিজ্ঞতা থেকে থাকে নিঃসঙ্কোচে আপনার ভাবনাগুলো আমাদের সাথে শেয়ার করুন নিচের কমেন্ট এ!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.