ওয়েবসাইটে অন স্ক্রল অ্যানিমেশন যুক্ত করতে হয় কিভাবে

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

AOS (Animate On Scroll)

এটি মূলত অন স্ক্রল অ্যানিমেশন সাইটে যুক্ত করার জন্য একটি জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক। এটি সম্পূর্ন ফ্রী এবং ওপেন সোর্স। এটি আপনারা গিটহাব থেকে ডাউনলোড করে কিংবা CDN লিঙ্ক ব্যবহার করে আপনার সাইটে ব্যবহার করতে পারবেন। এটার একটি বিশেষ ফিচার হলো এটা নিচ দিকে স্ক্রল করার সময় যেমনি ভাবে অ্যানিমেট হবে নিচ থেকে উপরের দিকে স্ক্রল করলে ঠিক তার উল্টো অ্যানিমেট হয়ে লেআউট ইনভিজিবল হবে। সকল অ্যানিমেশন এর ডেমো দেখতে চাইলে নিচের লিংক থেকে দেখতে পারবেন।

View Demo

How to use

এটা ব্যবহার করা অনেক সহজ। এটা ব্যবহার করার জন্য আপনাকে প্রথমত এটার CDN লিঙ্ক ব্যবহার করে এটার সিএসএস এবং জাভাস্ক্রিপ্ট ফাইল দুটি আপনার HTML ডকুমেন্ট এর সাথে লিঙ্ক করতে হবে। তো প্রথমে সিএসএস লিঙ্ক করার জন্য নিচের কোডটুকু কপি করে আপনার HTML ফাইলের হেড ট্যাগ এর মধ্যে পেস্ট করে দিন।

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

এর পর আপনাকে আপনার এইচটিএমএল ডকুমেন্ট এর মধ্যে AOS এর জাভাস্ক্রিপ্ট কিনক করতে হবে এবং একটি ফাংশন কল করতে হবে। এর জন্য জাস্ট নিচের কোডটুকু আপনার ডকুমেন্ট এর সাথে যুক্ত করে দিন।

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
    AOS.init();
</script>

এবার মূল কাজ হলো কোন লেআউটে কোন অ্যানিমেশন যোগ করবেন সেটা ডিক্লিয়ার করার। এর জন্য আপনাদের নিচের কোড মতো করে "data-aos" এট্রিবিউট এর ভ্যালু হিসেবে কোন টাইপের অ্যানিমেশন যোগ করতে চান সেটা দিতে হবে। নিচে data-aos এর সকল ভ্যালু নিচে দেওয়া হলো। এছাড়া এই লিংকে গিয়ে AOS এর অফিসিয়াল সাইট থেকে সকল ভ্যালু এবং সেগুলো কিভাবে অ্যানিমেট হবে সবকিছু লাইভ দেখতে পারবেন।

<div data-aos="fade-in">
    <!--  -->
</div>

All Animation Types

• Fade animations:

  • fade
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

• Flip animations:

  • flip-up
  • flip-down
  • flip-left
  • flip-right

• Slide animations:

  • slide-up
  • slide-down
  • slide-left
  • slide-right

• Zoom animations:

  • zoom-in
  • zoom-in-up
  • zoom-in-down
  • zoom-in-left
  • zoom-in-right
  • zoom-out
  • zoom-out-up
  • zoom-out-down
  • zoom-out-left
  • zoom-out-right

এছাড়া আরো কিছু data-aos-* এট্রিবিউট আছে যেগুলো ব্যবহার করে অ্যানিমেশন কন্ট্রোল করতে পারবেন। সম্পূর্ন ডকুমেন্টেশন দেখতে চাইলে নিচে AOS এর গিতহাব লিঙ্ক দেওয়া হলো সেখান থেকে দেখতে পারবেন।

View On Github