প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ইফেক্টটি ওয়েব ডিজাইনে একটি আকর্ষণীয় অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়। আপনি JavaScript এর মাধ্যমে কাস্টম প্যারালাক্স ইফেক্ট তৈরি করতে পারেন, যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্ট ভিন্ন গতিতে স্ক্রল করে। এটি একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ অনুভূতি তৈরি করে, যা ব্যবহারকারীদের স্ক্রলিং অভিজ্ঞতাকে আরও উন্নত করে তোলে।
এই টিউটোরিয়ালে আমরা দেখব কীভাবে JavaScript ফাংশন ব্যবহার করে কাস্টম প্যারালাক্স ইফেক্ট তৈরি করা যায়।
কাস্টম Srallax Effect তৈরি করার জন্য JavaScript Functions
আমরা একটি কাস্টম parallax() ফাংশন তৈরি করব, যা স্ক্রল ইভেন্টের মাধ্যমে ব্যাকগ্রাউন্ডের পজিশন নিয়ন্ত্রণ করবে এবং লেয়ারগুলোর গতির পার্থক্য তৈরি করবে।
উদাহরণ: কাস্টম Srallax Effect
১. HTML স্ট্রাকচার
প্রথমে আমাদের HTML ফাইল তৈরি করতে হবে, যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট দেখানো হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Srallax Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax" id="layer1"></div> <!-- Background Layer -->
<div class="content">
<h1>Welcome to Custom Srallax Effect!</h1>
<p>Scroll down to see the effect</p>
</div>
<div class="parallax" id="layer2"></div> <!-- Middle Layer -->
<div class="content">
<h2>Enjoy the parallax experience!</h2>
</div>
<div class="parallax" id="layer3"></div> <!-- Front Layer -->
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং
এখন আমাদের CSS দিয়ে লেয়ারগুলো এবং কন্টেন্ট স্টাইল করতে হবে। এখানে, আমরা তিনটি লেয়ার ব্যবহার করব, এবং প্রতিটি লেয়ারের জন্য আলাদা ব্যাকগ্রাউন্ড ইমেজ এবং স্টাইল থাকবে।
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
position: relative;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: transform 0.2s ease-in-out;
}
#layer1 {
background-image: url('background1.jpg'); /* Background Image */
z-index: -2;
}
#layer2 {
background-image: url('background2.jpg'); /* Middle Layer Image */
z-index: -1;
}
#layer3 {
background-image: url('background3.jpg'); /* Front Layer Image */
z-index: 1;
}
.content {
text-align: center;
padding: 50px;
background-color: white;
z-index: 2;
}
৩. JavaScript দিয়ে কাস্টম Srallax Effect তৈরি
এখন, JavaScript ব্যবহার করে আমরা কাস্টম parallax() ফাংশন তৈরি করব, যা স্ক্রল ইভেন্টের মাধ্যমে বিভিন্ন লেয়ারের জন্য আলাদা স্ক্রল স্পিড নির্ধারণ করবে।
// script.js
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset; // Get the current scroll position
// Apply different scroll speeds for different layers
parallax('layer1', scrollPosition, 0.3); // Slow Scroll for Background
parallax('layer2', scrollPosition, 0.5); // Medium Scroll for Middle Layer
parallax('layer3', scrollPosition, 0.7); // Fast Scroll for Front Layer
});
function parallax(layerId, scrollPosition, speed) {
var layer = document.getElementById(layerId);
layer.style.transform = 'translateY(' + (scrollPosition * speed) + 'px)';
}
ব্যাখ্যা:
- scrollPosition:
window.pageYOffsetএর মাধ্যমে আমরা স্ক্রল পজিশন বের করি, যা ওয়েবপেজের কতটা নিচে স্ক্রল হয়েছে তা নির্ধারণ করে। - parallax() ফাংশন: এই ফাংশনটি ব্যাকগ্রাউন্ড, মিডল এবং ফ্রন্ট লেয়ারগুলোর জন্য স্ক্রল স্পিড কন্ট্রোল করে।
speedপ্যারামিটার দিয়ে আমরা প্রতিটি লেয়ারের জন্য আলাদা স্ক্রল স্পিড নির্ধারণ করতে পারি।0.3,0.5, এবং0.7মানের মাধ্যমে, ব্যাকগ্রাউন্ড লেয়ার ধীরে স্ক্রল করবে, মিডল লেয়ার একটু দ্রুত স্ক্রল হবে, এবং ফ্রন্ট লেয়ার দ্রুত স্ক্রল হবে।
৪. অতিরিক্ত কাস্টমাইজেশন
আপনি এই কাস্টম ফাংশনটিকে আরও কাস্টমাইজ করতে পারেন:
- 3D Rotate Effect: আপনি
rotateY()বাrotateX()ব্যবহার করে 3D রোটেট ইফেক্ট যোগ করতে পারেন।
layer.style.transform = 'translateY(' + (scrollPosition * speed) + 'px) rotateY(' + (scrollPosition * 0.05) + 'deg)';
- Scale Effect: লেয়ারগুলোর আকারও পরিবর্তন করা যেতে পারে, যা স্ক্রলিংয়ের সাথে যুক্ত হতে পারে।
layer.style.transform = 'scale(' + (1 + scrollPosition * 0.001) + ')';
- Opacity Effect: স্ক্রলিংয়ের সময় লেয়ারগুলোর opacity পরিবর্তন করাও সম্ভব। এটি লেয়ারগুলিকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে।
layer.style.opacity = 1 - scrollPosition / 1000;
৫. পারফরম্যান্স টিপস
- requestAnimationFrame(): স্ক্রলিংয়ের সময় পারফরম্যান্স উন্নত করতে
requestAnimationFrame()ব্যবহার করা যেতে পারে। এটি স্ক্রলিংয়ের জন্য অ্যানিমেশনকে মসৃণভাবে রেন্ডার করতে সাহায্য করবে।
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
var scrollPosition = window.pageYOffset;
parallax('layer1', scrollPosition, 0.3);
parallax('layer2', scrollPosition, 0.5);
parallax('layer3', scrollPosition, 0.7);
});
});
- Image Optimization: ভারী ব্যাকগ্রাউন্ড ইমেজগুলি ওয়েব ফ্রেন্ডলি ফরম্যাটে (যেমন WebP) কম্প্রেস করে ব্যবহার করুন।
সারাংশ
কাস্টম Srallax Effect তৈরি করার জন্য JavaScript এর মাধ্যমে স্ক্রল ইভেন্ট ট্র্যাক করা হয় এবং প্রতিটি লেয়ারের জন্য আলাদা স্ক্রল স্পিড নির্ধারণ করা হয়। এটি আপনার ওয়েবপেজে একটি ডাইনামিক, আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে। JavaScript ফাংশন ব্যবহার করে আপনি সহজে ব্যাকগ্রাউন্ড, মিডল এবং ফ্রন্ট লেয়ারগুলির স্ক্রল স্পিড কাস্টমাইজ করতে পারেন এবং ওয়েব ডিজাইনকে আরও উন্নত করতে পারেন।
Read more
