রেস্পন্সিভ টাইমলাইন পোর্টফলিও পেইজের সমাপ্তি

আগের টিউটোরিয়াল থেকে আরও অগ্রসর হয়ে এবার আসুন আমাদের পাতাটি আমরা আগের চেয়ে কিছুটা উন্নত করি।

লোডিং আইকন

আমরা সিএসএস ৩ এর অ্যানিমেশনসমূহ থেকে আমাদের লোডিং আইকনের জন্য একটি সহজ ঘূর্ণায়মান অ্যানিমেশন তৈরি করতে যাচ্ছি। আমাদের পেইজের মার্কআপ এরই মধ্যেই তৈরি আছে, তাই আমরা সরাসরি সিএসএস এ যাবো।

div.loading {
    color: darken($grey, 20%);
    position: absolute;
    width: 100px;
    bottom: 15px;
    left: 50%;
    margin-left: -50px;

    img {
        vertical-align: middle;

        &.rotate {
            -webkit-animation-name: rotate;
            -ms-animation-name: rotate;
            animation-name: rotate;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -ms-animation-timing-function: linear;
            animation-timing-function: linear;
        }


    }
}

আমাদের Sass ফাইলের portfolio-item ব্লকের ঠিক পরেই এই কোডটি যুক্ত করুন। শুরুতে আমরা লোডিং div এর জন্য কিছু স্টাইল যুক্ত করবো আমরা margin-left এ -50px ব্যবহার করে এটার পজিশন যাতে একেবারে মধ্যভাগে থাকে তা নিশ্চিত করবো, যা আসলে সম্পূর্ণ এলিমেন্টের অর্ধেক।  এটা এমনভাবে তৈরি করা হবে যাতে সিএসএস এলিমেন্ট এর অবস্থান উপরের বাম কর্নার থেকে থাকে।

পরের সেকশনটি আরও মজার।   আপনি নিশ্চয়ই দেখেছেন যে আমরা এইচটিএমএল এ লোডিং <img> এর সাথে একটি rotate ক্লাস যুক্ত করেছি,  যা আমরা সিএসএস এনিমেশন চালানোর জন্য একটি হুক হিসেবে ব্যবহার করবো। নিচের স্টাইলটি আমরা আমাদের অ্যানিমেশনের জন্য সেটআপ করবো।

আমরা মূলত সিএসএস এ ঠিক করবো আমাদের অ্যানিমেশন ফাংশনের নাম কি হবে (এক মুহূর্তেই আমরা এটা তৈরি করবো), এই অ্যানিমেশনটি কতক্ষন চলবে, কয়বার এটা চলবে এবং কি ধরনের টাইমিং অথবা ইজিং ফাংশন ব্যবহার করবে। আমাদের প্রজেক্টের জন্য আমরা একটি সুন্দর, মসৃণ ৩৬০ ডিগ্রী রোটেশন বা ঘূর্ণায়মান আইকন চাই, যা কখনও থামবে না। উপরের কোডটি দিয়ে ঠিক তাই অর্জন করা সম্ভব।

নোট: আমাদের এখানে ব্রাউজার প্রিফিক্স ডিক্লারেশন যোগ করতে হবে যাতে কোন কিছুই বাদ না যায়- এবং এই কাজটি আমরা সাস মিক্স ইন ব্যবহার করে খুব সহজেই করতে পারি।

চলুন, এবার ব্রাউজারে দেখা যাক।

ঠিক আছে, এটা বেশ ভালো দেখাচ্ছে কিন্তু এখানে একটা জিনিস বাদ গেছে। এটা অ্যানিমেট হচ্ছে না!  চলুন, এবার নিচের কোড দিয়ে এই জিনিসটি ঠিক করি:

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;
    }
}

তাহলে এই হচ্ছে rotate ফাংশন। এটা যেভাবে কাজ করে তা হচ্ছে অ্যানিমেশনে কী পয়েন্ট সেট করার মাধ্যমে এলিমেন্ট পরিবর্তন করা। কোন কিছু করার জন্য আপনাকে 0%, 25%, 50% থেকে শুরু করে অন্যান্য অংক সেট করতে পারেন। আমাদের এনিমেশনটি খুব সাধারণ, তাই আমরা 100% ডিক্লেরেশন করতে হবে যাতে বলা হয়েছে যে আমাদের এলিমেন্টটি অবশ্যই ৩৬০ ডিগ্রী ঘুরে যেতে পারে। মানে হচ্ছে, আমাদের এলিমেন্টটি সম্পূর্ণ ঘুরে যাবে এবং যেখানে থামবে, সেখান থেকে আবার শুরু হবে। আমাদের পূর্ব সেট আপে নিশ্চিত করা হয়েছে যে এটি অনির্দিষ্টকালের জন্য চলতে থাকবে। transform-origin দিয়ে অ্যানিমেশনের মূল বিন্দু কোথায় হবে তা CSS কে বলা হয়। আমরা কেন্দ্রের উপরের বাম দিকের কোণ থেকে এটি স্পিন করতে পারি (এটি বেশ আকর্ষণীয় হতে পারে!) তবে আমরা কেবল এখানে আমাদের উপাদানটির সঠিক কেন্দ্রটি ব্যবহার করতে চাই। এই ফাইলটি এবার সংরক্ষন করুন এবং ব্রাউজারে এক নজর দেখে নিন!

এটা উপরের মতই দেখাবে, কিন্তু আরও মসৃণভাবে এবং দ্রুত ঘুরবে।

এটা আমাদের টাইমলাইন পোর্টফলিও পেইজের উপর নির্ভরশীল, কিন্তু এখানে আরো একটি বিষয় আছে যা আমরা এই টিউটোরিয়ালে যোগ করতে পারি।

কন্টেন্ট লোড করা

বাস্তবে এই ধরনের লেআউট/থিমে এমন কিছু ইনফিনিট স্ক্রল ফিচার থাকে যাতে আপনি পেইজের নিচের দিকে স্ক্রলিং করে গেলে আরো কিছু আইটেম দেখা যাবে, এজন্য আপনাকে পেইজের কোনও স্থানে ক্লিক করতে হবে না।

আমরা মাত্র কয়েক লাইন জেকুয়েরী কোড ব্যবহার করে এ ধরনের লেআউট অনুকরণ করতে পারি।  app.js খুলুন এবং নিচের কোড যুক্ত করুন, যেখানে এর আগে আমরা আমাদের মেনু টাইটেলের ক্লিক হ্যাণ্ডলারের কোড লিখেছি।

var visibleHeight = $(document).height() - $(window).height();
var items;

প্রথমত আমাদের দুটি ভেরিয়েবল ঘোষণা করতে হবে যা আমরা পরে ব্যবহার করবো। দ্বিতীয়টি হচ্ছে এমন একটি ঘোষণা যাতে পরবর্তীতে একটি নির্দিষ্ট মান যুক্ত করা হবে। প্রথমটি হচ্ছে visibleHeight, যা window এর উচ্চতা নিয়েছে এবং সম্পূর্ণ document এর উচ্চতা থেকে তা বিয়োগ করেছে। এটা আমাদের ব্যবহারকারীর ব্রাউজারে যতটুকু দেখায় ঠিক ততটুকু অংশই বর্তমানে লোড করে দেখাবে।

storeElements();

$(window).on('resize', function(e) {
    updateHeight();
});

$(window).on('scroll', function(e) {
    loadContent();
});

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

function storeElements() {
    items = $('.portfolio-item:lt(3)').clone();
    //Strip the first class from selection
    items.removeClass('first');
}

storeElements ফাংশনটি আমাদের items ভেরিয়েবলটি কিছু DOM এলিমেন্টের মাধ্যমে পূর্ণ করার একটি উপায়। আমাদের ক্ষেত্রে আমরা প্রথম তিনটি portfolio-items নিতে চাই। জেকুয়েরির lt() ব্যবহার করে আমরা আমাদের পছন্দমত এলিমেন্টগুলো বেছে নিতে পারবো। নির্বাচন করা হয়ে গেলে আমরা এগুলোকে clone() করবো, তাহলে আমরা মূল উপাদানগুলোর পরিবর্তে একটি কপি ব্যবহার করবো। শেষের ধাপ হচ্ছে যদি first ক্লাস থাকে তা মুছে ফেলা, কারন আমাদের নতুন এলিমেন্টগুলোর লিস্টে কোনটিই আসলে প্রথম নয়।

function updateHeight() {
    visibleHeight = $(document).height() - $(window).height();
}

এই ফাংশনটি storeElements এর উপর স্থাপন করুন। এটা সম্ভবত সবচেয়ে সহজ ফাংশন যা আমরা ইতিপূর্বে document ready তে করেছি। যে কারনে আমরা এটা করতে একটি ফাংশন ব্যবহার করেছি তা হচ্ছে এটাকে পুনরায় ব্যবহারযোগ্য রাখার জন্য।

এখন আমরা এমন একটি ফাংশন পেয়েছি যা এই কাজটি সম্পন্ন করবে...

function loadContent() {

    if($(window).scrollTop() >= visibleHeight) {

        $(window).unbind('scroll');
        
        var loadingWrap = $('.loading-wrap');
        
        loadingWrap.fadeIn(function() {
            setTimeout(function() {
                loadingWrap.before(items);
                loadingWrap.hide(function() {
                    updateHeight();
                    storeElements();
                    $(window).on('scroll', function() { loadContent(); });
                });
            }, 500);
        });

    }
}

ঠিক আছে, এখানে ধাপে ধাপে দেখানো হলো, আমরা যা করছি:

• স্ক্রলের পজিশন (আগের স্ক্রলের) তুলনায় বেশি অথবা বর্তমানে visibleHeight এর তুলনায় বেশি কিনা।
• যদি তা হয়, তাহলে window থেকে স্ক্রল ইভেন্ট হ্যান্ডলার মুছে ফেলা যাতে আমরা কনটেন্ট প্রসেস করতে পারি।
• loading-wrap টি পরে ব্যবহার করার জন্য ক্যাশ/জমা করা।
• লোড সম্পূর্ণ হওয়ার পর loading-wrap টি হালকা করে দেয়া...
• ..."loading" কনটেন্টের অনুকরণে একটি ছোট্ট Timeout সেট করুন।
• আমাদের ক্লোন করা items loading-wrap এর পূর্বে সংযুক্ত করুন। এটা লোডিং আইকন এবং বর্তমান portfolio-items এর মধ্যে সুন্দরভাবে পথ খুঁজে নিবে।
• loading-wrap লুকান এবং updateHeight, storeElements লুকানো হয়ে গেলে স্ক্রল ইভেন্টটি নির্দেশনাসহ window এর সাথে সংযুক্ত করুন যাতে ফাংশনটি পুনরায় চালু হয়।

হুম! অনেক বেশি মনে হচ্ছে, তাই এটা প্রয়োজনে আবার চালু করুন। একটা বিষয় হয়তোবা লক্ষ্য করেছেন, আপনি যদি নিখুঁতভাবে দেখেন, এটাই কি loading-wrap এ হালকা করে দেয়া বস্তুটি যা আমাদের  HTML এ এখন দৃশ্যমান। এই এলিমেন্টে একটি ইনলাইন স্টাইল যুক্ত করে তা ঠিক করুন...

<div class="portfolio-item group loading-wrap" style="display:none;">

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

$('.menus h3').on('click', function(e) {
    $(this).next('ul').toggleClass('open');
    updateHeight();
    e.preventDefault(); return false;
});

শুরুতে আমাদের তৈরি করা h3 ক্লিক হ্যান্ডলারের ভিতর আমরা অবশ্যই একটি updateHeight() ফাংশন কল করবো, এইভাবে আমরা যখন কোনও মেনুতে ক্লিক করবো ভেরিয়েবলগুলো আপডেট হয়ে ডকুমেন্টের উচ্চতা অনুসারে লোড হবে। এটা ছাড়া, যদি আপনি একটি মেনু মোবাইলে খুলেন তাহলে "loading" ফাংশনালিটি ভেঙ্গে যাবে কারন visibleHeight ভেরিয়েবলটি যেহেতু সঠিক নয়।

পরিশিষ্ট

আমরা একেবারে শেষে এসে পৌঁছেছি! আমরা এবার আমাদের লিখিত জাভাস্ক্রিপ্টটি গুছিয়ে নিতে পারি, এবং বাস্তব ক্ষেত্রে এটা AJAX কল অথবা এই ধরনের কোনও কিছুতে পরিবর্তন করে নেয়া যাবে।

আমি আশা করি এই টিউটোরিয়াল থেকে আপনি ভিন্ন ধরনের কিছু টেকনিক শিখেছেন। এটা তৈরি করা বেশ মজার এবং এবং আমি এই সুন্দর ডিজাইনটি আপনার সাথে শেয়ার করতে পেরে সত্যিই খুশি। আমি নিশ্চিত এটা আরও উন্নত করার জন্য অসংখ্য উপায় আছে, তাই আপনার কোনও পরামর্শ থাকলে তা দয়া করে আমাকে কমেন্টে জানান!