প্যারালাক্স স্ক্রলিং (Srallax Scrolling) এবং অ্যানিমেশন একত্রে ব্যবহার করলে একটি অত্যন্ত আকর্ষণীয় এবং ডাইনামিক ওয়েব এক্সপিরিয়েন্স তৈরি করা যায়। যেখানে প্যারালাক্স স্ক্রলিং ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য সৃষ্টি করে, সেখানে অ্যানিমেশন বিভিন্ন এলিমেন্টের আকার, রঙ, অবস্থান বা অন্যান্য ভিজ্যুয়াল উপাদান পরিবর্তন করে স্ক্রলিংয়ের সাথে ইন্টারঅ্যাকটিভ আচরণ তৈরি করতে সহায়তা করে। এই দুইটি কৌশল একত্রিত করলে একে অপরকে সম্পূরকভাবে কাজ করতে সাহায্য করে।
এখানে আমরা দেখব কীভাবে প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একসাথে ব্যবহার করা যেতে পারে এবং কিভাবে এই দুটি একে অপরের সাথে সমন্বয় করা যায়।
১. প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একত্রিত করার জন্য প্রস্তুতি
প্রথমে আমাদের প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশনকে সঠিকভাবে সংযুক্ত করতে হবে, যাতে স্ক্রলিংয়ের সাথে অ্যানিমেশনটি সমন্বিতভাবে কাজ করে। এই প্রক্রিয়া প্যারালাক্স স্ক্রলিংয়ের অভিজ্ঞতাকে আরও গতিশীল এবং আকর্ষণীয় করে তুলবে।
১. HTML ফাইল
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax and Animation Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Scroll Down to See the Effect</h1>
<p>Enjoy the combination of Parallax and Animations!</p>
</div>
</div>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content animated-content">
<h2>Welcome to the Animated Parallax World!</h2>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং (styles.css)
এখন, প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশনকে সঠিকভাবে স্টাইল করতে হবে। এখানে আমরা প্যারালাক্স ব্যাকগ্রাউন্ড এবং কন্টেন্টের জন্য বিভিন্ন অ্যানিমেশন তৈরি করব।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body and General Styling */
body, html {
height: 100%;
font-family: Arial, sans-serif;
}
/* Parallax Container */
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
}
/* Parallax Background */
.parallax-background {
background-image: url('your-image.jpg');
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
transition: background-position 0.5s ease-out;
}
/* Content Styling */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 2em;
}
/* Animation for Content */
.animated-content {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.animated-content.active {
opacity: 1;
transform: translateY(0);
transition: opacity 1s ease-in-out, transform 1s ease-in-out;
}
/* Media Queries for Mobile */
@media only screen and (max-width: 768px) {
.parallax-background {
background-attachment: scroll;
}
}
৩. JavaScript (script.js)
এখন, প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একত্রিত করার জন্য JavaScript কোড যোগ করব। স্ক্রল করার সময় প্যারালাক্স স্ক্রলিং এবং কন্টেন্টের অ্যানিমেশন একসাথে কাজ করবে।
// Function to handle the parallax scrolling effect
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset;
var parallax = document.querySelector('.parallax-background');
parallax.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
// Activate animations on scroll
var animatedContent = document.querySelectorAll('.animated-content');
animatedContent.forEach(function(content) {
if (isElementInViewport(content)) {
content.classList.add('active');
}
});
});
// Check if element is in the viewport
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (rect.top <= window.innerHeight && rect.bottom >= 0);
}
কোডের ব্যাখ্যা
- HTML:
.parallax-containerএবং.parallax-backgroundদিয়ে প্যারালাক্স লেয়ার তৈরি করা হয়েছে।.contentসেকশনে টেক্সট বা অন্যান্য কন্টেন্ট রয়েছে যা স্ক্রল করার সময় অ্যানিমেশন প্রাপ্ত হবে।
- CSS:
.parallax-backgroundএর জন্যbackground-attachment: fixedব্যবহার করা হয়েছে, যাতে ব্যাকগ্রাউন্ড ধীরে ধীরে স্ক্রল হয় এবং প্যারালাক্স ইফেক্ট তৈরি হয়।.animated-contentএর জন্যopacityএবংtransformব্যবহার করা হয়েছে, যাতে কন্টেন্টটি স্ক্রল করার সময় ধীরে ধীরে দৃশ্যমান হয়ে ওঠে এবং উপরের দিকে উঠে আসে।- Transition:
.animated-contentক্লাসেরopacityএবংtransformট্রানজিশন ব্যবহার করে অ্যানিমেশন তৈরি করা হয়েছে।
- JavaScript:
- scroll event ট্র্যাক করা হয়েছে এবং প্যারালাক্স স্ক্রলিংয়ের জন্য ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করা হয়েছে।
- isElementInViewport ফাংশনটি চেক করে কন্টেন্ট সেকশনটি ভিউপোর্টে আছে কি না, এবং স্ক্রল করার সময়
.activeক্লাস যোগ করা হয়, যা কন্টেন্টের অ্যানিমেশন কার্যকর করে।
৪. অ্যানিমেশন এবং প্যারালাক্স স্ক্রলিংয়ের মধ্যে সমন্বয়
এই কোডে, আমরা প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একত্রিত করেছি:
- স্ক্রল করার সময় ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন হবে, যা একটি প্যারালাক্স ইফেক্ট সৃষ্টি করবে।
- কন্টেন্টের অ্যানিমেশন তখনই শুরু হবে, যখন তা ভিউপোর্টে পৌঁছাবে। এটি opacity এবং transform এর মাধ্যমে মসৃণভাবে প্রর্দশিত হবে।
এভাবে, প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একত্রিত হলে আপনি একটি আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ওয়েব পেজ তৈরি করতে পারবেন, যা স্ক্রলিংয়ের সময় ব্যবহারকারীকে আরও মনোযোগ আকর্ষণ করবে।
সারাংশ
প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন একত্রিত করা ওয়েব ডিজাইনকে নতুন মাত্রা যোগ করতে সহায়তা করে। প্যারালাক্স স্ক্রলিং ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে, এবং অ্যানিমেশন কন্টেন্টকে স্ক্রলিংয়ের সাথে ইন্টারঅ্যাকটিভভাবে উপস্থাপন করে। এই দুটি কৌশল একসাথে ব্যবহার করে আপনি একটি ডাইনামিক এবং আকর্ষণীয় ব্যবহারকারী অভিজ্ঞতা তৈরি করতে পারেন।
Read more
