প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েব ডিজাইনে একটি আকর্ষণীয় টেকনিক, যেখানে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করা হয়। তবে, scroll progress বা স্ক্রল পজিশন ট্র্যাক করে অ্যানিমেশন চালু করা ওয়েব ডিজাইনের আরও একটি ইন্টারঅ্যাকটিভ উপাদান। এতে স্ক্রলিংয়ের প্রতি ধাপে অ্যানিমেশন বা অন্যান্য ইফেক্ট ট্রিগার করা হয়, যা ব্যবহারকারীর অভিজ্ঞতাকে আরও আকর্ষণীয় এবং ডাইনামিক করে তোলে।
এখানে, আমরা দেখব কীভাবে scroll progress এর উপর ভিত্তি করে অ্যানিমেশন ট্রিগার করা যায় এবং প্যারালাক্স স্ক্রলিংয়ের সাথে যুক্ত করা যায়।
Scroll Progress ট্র্যাক করে অ্যানিমেশন ট্রিগার করা
স্ক্রল পজিশন ট্র্যাক করে আপনি পেজে একাধিক অ্যানিমেশন চালু করতে পারেন, যেমন ব্যাকগ্রাউন্ডের অবস্থান পরিবর্তন, এলিমেন্টের ফেড ইন/আউট, স্লাইডিং ইফেক্টস ইত্যাদি। আমরা একটি উদাহরণ দেখব, যেখানে স্ক্রল পজিশন অনুযায়ী একটি ব্যাকগ্রাউন্ড ইমেজ এবং টেক্সট এলিমেন্টের অ্যানিমেশন ট্রিগার করা হবে।
১. HTML স্ট্রাকচার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Progress Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-container">
<div class="parallax-background" id="background"></div>
<div class="content" id="content">
<h1>Scroll down to see the animation</h1>
<p>This animation will trigger based on the scroll progress.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং
এখানে, আমরা .parallax-container এবং .parallax-background সেকশনগুলো তৈরি করেছি এবং স্ক্রল পজিশন অনুযায়ী ব্যাকগ্রাউন্ড এবং কন্টেন্ট সেকশনকে কাস্টমাইজ করেছি।
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body and General Styling */
body, html {
height: 100%;
font-family: Arial, sans-serif;
}
.parallax-container {
position: relative;
height: 200vh; /* Height greater than viewport for scroll */
}
.parallax-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('your-image.jpg');
background-size: cover;
background-position: center;
transition: transform 0.2s ease-in-out; /* Smooth transition */
}
.content {
position: relative;
z-index: 1;
color: white;
text-align: center;
padding: 50px;
font-size: 2em;
opacity: 0; /* Initially hidden */
transition: opacity 0.5s ease-in-out; /* Fade in effect */
}
h1 {
font-size: 3em;
}
p {
font-size: 1.5em;
}
/* Optional: Adding some styles to make scroll progress clear */
body {
background-color: #f0f0f0;
}
৩. JavaScript কোড: Scroll Progress ট্র্যাক করে অ্যানিমেশন Trigger
এখন, আমরা স্ক্রল ইভেন্ট ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করব এবং সেটি background এবং content এর উপর অ্যানিমেশন ট্রিগার করতে ব্যবহার করব।
// script.js
window.addEventListener('scroll', function() {
// Get the scroll position
var scrollPosition = window.pageYOffset;
var documentHeight = document.documentElement.scrollHeight - window.innerHeight;
var scrollProgress = (scrollPosition / documentHeight) * 100; // Percentage of scroll
// Update background position based on scroll progress
var background = document.getElementById('background');
var content = document.getElementById('content');
// Trigger parallax effect by adjusting background position
background.style.transform = 'translateY(' + (scrollPosition * 0.3) + 'px)';
// Trigger opacity change for content based on scroll progress
if (scrollProgress > 20) {
content.style.opacity = 1; // Fade-in effect after scrolling 20%
} else {
content.style.opacity = 0; // Initially hidden
}
// Optionally, we can add more animations based on scroll progress
// Example: Change color of text or trigger other effects
content.style.color = `rgb(${scrollProgress}, ${100 + scrollProgress}, ${150 + scrollProgress})`; // Color change based on scroll progress
});
ব্যাখ্যা:
- scrollProgress:
scrollPosition / documentHeightদিয়ে আমরা স্ক্রল পজিশনকে পেজের মোট স্ক্রলেবল উচ্চতার সাথে ভাগ করে একটি শতাংশ নির্ধারণ করি (0-100% পর্যন্ত)। - background.style.transform: স্ক্রল পজিশনের উপর ভিত্তি করে ব্যাকগ্রাউন্ডের
translateY()প্রপার্টি পরিবর্তন করা হয়, যাতে প্যারালাক্স ইফেক্ট তৈরি হয়। এখানে0.3এর মান পরিবর্তন করলে ব্যাকগ্রাউন্ডের গতির পার্থক্য পরিবর্তন করা যাবে। - content.style.opacity: স্ক্রল প্রগ্রেস অনুযায়ী কন্টেন্ট সেকশনটি ধীরে ধীরে দৃশ্যমান হবে, যার জন্য opacity পরিবর্তন করা হয়েছে। ২০% স্ক্রল হলে কন্টেন্টটি ধীরে ধীরে ফেড ইন হবে।
- content.style.color: স্ক্রল প্রগ্রেস অনুযায়ী টেক্সটের রঙ পরিবর্তন করা হচ্ছে, যাতে স্ক্রলিংয়ের সঙ্গে একটি অতিরিক্ত ইফেক্ট যুক্ত হয়।
৪. অতিরিক্ত কাস্টমাইজেশন
- CSS Transitions এবং Animations: আপনি আরও CSS animations ব্যবহার করে স্ক্রলিংয়ের সাথে বিভিন্ন ইফেক্ট যোগ করতে পারেন। যেমন, স্ক্রল প্রগ্রেস অনুযায়ী এলিমেন্টের সাইজ, রঙ, বা অন্যান্য বৈশিষ্ট্য পরিবর্তন করা।
- SVG বা Canvas ব্যবহার করা: আরও কাস্টম এবং জটিল অ্যানিমেশন তৈরি করতে আপনি SVG অথবা Canvas ব্যবহার করতে পারেন, যা স্ক্রল প্রগ্রেসের সাথে আরও সৃজনশীল অ্যানিমেশন তৈরি করবে।
সারাংশ
Scroll Progress এর উপর ভিত্তি করে অ্যানিমেশন ট্রিগার করা প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনের একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ টেকনিক। JavaScript ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করে বিভিন্ন ইফেক্ট যেমন parallax এবং fade-in ইফেক্ট তৈরি করা সম্ভব। এই প্রক্রিয়া ব্যবহারকারীর অভিজ্ঞতাকে আরও উন্নত করে এবং ওয়েবপেজকে আরও আকর্ষণীয় করে তোলে।
Read more
