প্যারালাক্স স্ক্রলিং একটি অত্যন্ত জনপ্রিয় এবং চিত্তাকর্ষক ওয়েব ডিজাইন টেকনিক, যেখানে স্ক্রল করার সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করা হয়। এর মাধ্যমে ওয়েবপেজে একটি ত্রিমাত্রিক অনুভূতি সৃষ্টি করা হয়, যেখানে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হয় এবং ফরওয়ার্ড কন্টেন্ট দ্রুত স্ক্রল হয়।
Different Speed Layers এবং Elements যোগ করে প্যারালাক্স স্ক্রলিং আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করা যায়। এখানে দেখানো হবে কিভাবে বিভিন্ন গতির স্তর (layers) এবং উপাদান যোগ করা যায়।
প্যারালাক্স স্ক্রলিংয়ে Different Speed Layers এবং Elements যোগ করার জন্য পদক্ষেপ
১. HTML স্ট্রাকচার তৈরি করা
প্রথমে, একটি বেসিক HTML স্ট্রাকচার তৈরি করতে হবে যেখানে একাধিক লেয়ার থাকবে, এবং প্রতিটি লেয়ারে বিভিন্ন গতির স্ক্রলিং হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Speed Layers Parallax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-layer layer1"></div>
<div class="content">
<h1>Parallax with Different Speed Layers</h1>
<p>This is an example of parallax scrolling with layers having different speeds.</p>
</div>
<div class="parallax-layer layer2"></div>
<div class="parallax-layer layer3"></div>
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং
এখন, প্যারালাক্স লেয়ারের জন্য CSS স্টাইলিং করতে হবে। প্রতিটি লেয়ারের স্ক্রলিং স্পিড আলাদা হবে, যা JavaScript এর মাধ্যমে নিয়ন্ত্রণ করা হবে।
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body and overall layout */
body {
font-family: Arial, sans-serif;
height: 3000px; /* Allow for scrolling */
}
/* Content section */
.content {
position: relative;
padding: 100px;
background-color: rgba(255, 255, 255, 0.7);
text-align: center;
}
.content h1 {
font-size: 3rem;
}
.content p {
font-size: 1.5rem;
}
/* Parallax layers with different speeds */
.parallax-layer {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.layer1 {
background-image: url('layer1.jpg'); /* Replace with your background image */
z-index: -3;
}
.layer2 {
background-image: url('layer2.jpg'); /* Replace with your background image */
z-index: -2;
}
.layer3 {
background-image: url('layer3.jpg'); /* Replace with your background image */
z-index: -1;
}
৩. JavaScript দিয়ে Speed Control
JavaScript এর মাধ্যমে প্রতিটি লেয়ারের স্ক্রলিং স্পিড নিয়ন্ত্রণ করা হবে। এই ক্ষেত্রে, প্রতিটি লেয়ারের জন্য ভিন্ন ভিন্ন স্কেল এবং ট্রান্সফর্ম ভ্যালু দেওয়া হবে, যাতে বিভিন্ন গতির স্ক্রলিং এফেক্ট তৈরি হয়।
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY; // Get current scroll position
// Adjust the speed of each layer using translateY
var layer1 = document.querySelector('.layer1');
var layer2 = document.querySelector('.layer2');
var layer3 = document.querySelector('.layer3');
// Different speeds for each layer
layer1.style.transform = 'translateY(' + (scrollPosition * 0.2) + 'px)';
layer2.style.transform = 'translateY(' + (scrollPosition * 0.4) + 'px)';
layer3.style.transform = 'translateY(' + (scrollPosition * 0.8) + 'px)';
});
৪. JavaScript Explanation
- scrollY: স্ক্রল পজিশন ট্র্যাক করার জন্য
window.scrollYব্যবহার করা হয়েছে। - transform: translateY(): প্রতিটি লেয়ারের
translateYপ্রপার্টি ব্যবহার করা হয়েছে স্ক্রলিংয়ের জন্য, যাতে ব্যাকগ্রাউন্ড এবং কন্টেন্ট আলাদা গতিতে স্ক্রল হয়। এখানে:layer1(ব্যাকগ্রাউন্ড) খুব ধীরে স্ক্রল হবে (0.2 গুণ)layer2মাঝারি গতিতে স্ক্রল হবে (0.4 গুণ)layer3দ্রুত স্ক্রল হবে (0.8 গুণ)
৫. ফলস্বরূপ
- যখন ব্যবহারকারী স্ক্রল করবে, তখন layer1 (ব্যাকগ্রাউন্ড) ধীরে স্ক্রল হবে, layer2 মাঝারি গতিতে এবং layer3 দ্রুত স্ক্রল হবে।
- এর মাধ্যমে একটি ত্রিমাত্রিক অনুভূতি সৃষ্টি হবে যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্ট বিভিন্ন গতিতে স্ক্রল হয়ে একটি ডাইনামিক ইফেক্ট তৈরি করবে।
৬. Mobile Devices এর জন্য Optimization
মোবাইল ডিভাইসে অতিরিক্ত স্ক্রলিং বা ভারী গ্রাফিক্স পারফরম্যান্স ইস্যু সৃষ্টি করতে পারে। তাই মোবাইল ডিভাইসের জন্য প্যারালাক্স স্ক্রলিং কিছুটা নিষ্ক্রিয় করা যেতে পারে।
@media only screen and (max-width: 600px) {
.parallax-layer {
background-attachment: scroll; /* Disable parallax effect on mobile */
}
}
এভাবে, মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিংটি সাধারণ ব্যাকগ্রাউন্ড স্ক্রলিংয়ে রূপান্তরিত হবে, যাতে পারফরম্যান্স আরও উন্নত হয়।
সারাংশ
Different Speed Layers এবং Elements যোগ করা প্যারালাক্স স্ক্রলিংকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে। JavaScript এবং CSS এর মাধ্যমে আমরা বিভিন্ন গতির লেয়ার তৈরি করতে পারি, যেখানে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হবে এবং কন্টেন্ট দ্রুত স্ক্রল হবে। এছাড়া, মোবাইল ডিভাইসে পারফরম্যান্স নিশ্চিত করতে প্যারালাক্স স্ক্রলিংকে অপটিমাইজ করা উচিত।
এই টেকনিকটি ওয়েব ডিজাইনকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়তা করবে।
Read more
