Multi-layer Parallax Scrolling একটি উন্নত প্যারালাক্স স্ক্রলিং ইফেক্ট, যেখানে একাধিক লেয়ার (যেমন, ব্যাকগ্রাউন্ড, মিডল গ্রাউন্ড, এবং ফরওয়ার্ড কন্টেন্ট) স্ক্রল করার সময় আলাদা গতিতে চলে। এটি একটি আরো গভীর এবং ডাইনামিক অভিজ্ঞতা সৃষ্টি করে, যেখানে ব্যবহারকারী অনুভব করে যে তারা তিনটি ডাইমেনশনাল (3D) স্পেসে চলাফেরা করছে।
এখানে, আমরা CSS এবং JavaScript ব্যবহার করে Multi-layer Parallax Scrolling Effect কনফিগার করার প্রক্রিয়া শিখব।
Multi-layer Parallax Scrolling তৈরি করার জন্য স্টেপ-বাই-স্টেপ গাইড
১. HTML স্ট্রাকচার
প্রথমে, HTML ফাইলে একাধিক লেয়ার (ব্যাকগ্রাউন্ড, মিডল গ্রাউন্ড, ফরওয়ার্ড কন্টেন্ট) তৈরি করতে হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-layer Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Layers -->
<div class="parallax-layer background"></div>
<div class="parallax-layer midground"></div>
<div class="content">
<h1>Multi-layer Parallax Scrolling Effect</h1>
<p>This is a multi-layer parallax effect using CSS and JavaScript.</p>
</div>
<div class="parallax-layer foreground"></div>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল (styles.css)
এখন, CSS ফাইলে প্রতিটি লেয়ারের জন্য আলাদা গতির স্ক্রলিং অ্যাপ্লাই করা হবে। CSS3 এর transform এবং position প্রপার্টি ব্যবহার করে লেয়ারগুলির গতিকে নিয়ন্ত্রণ করা হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
height: 2000px; /* Enough space to scroll */
}
/* Common Style for Parallax Layers */
.parallax-layer {
position: absolute;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* Background Layer */
.background {
background-image: url('background.jpg'); /* Replace with your image */
z-index: 1;
}
/* Midground Layer */
.midground {
background-image: url('midground.jpg'); /* Replace with your image */
z-index: 2;
}
/* Foreground Layer */
.foreground {
background-image: url('foreground.jpg'); /* Replace with your image */
z-index: 3;
}
/* Content Section */
.content {
position: relative;
z-index: 10;
text-align: center;
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
}
.content h1 {
font-size: 3em;
}
.content p {
font-size: 1.5em;
}
৩. JavaScript ফাইল (script.js)
এই স্ক্রলিং ইফেক্টটি JavaScript দিয়ে কাস্টমাইজ করা হবে, যাতে স্ক্রল করার সময় প্রতিটি লেয়ারের গতি আলাদা হয়। JavaScript কোড স্ক্রল পজিশন ট্র্যাক করবে এবং সেটির উপর ভিত্তি করে লেয়ারগুলির অবস্থান পরিবর্তন করবে।
// Get all parallax layers
const background = document.querySelector('.background');
const midground = document.querySelector('.midground');
const foreground = document.querySelector('.foreground');
// On scroll event
window.addEventListener('scroll', function() {
let scrollPosition = window.pageYOffset;
// Adjust background speed
background.style.transform = 'translateY(' + scrollPosition * 0.4 + 'px)';
// Adjust midground speed
midground.style.transform = 'translateY(' + scrollPosition * 0.6 + 'px)';
// Adjust foreground speed
foreground.style.transform = 'translateY(' + scrollPosition * 0.8 + 'px)';
});
কোডের ব্যাখ্যা
- HTML:
.parallax-layerক্লাস ব্যবহার করে আমরা তিনটি লেয়ার তৈরি করেছি — ব্যাকগ্রাউন্ড, মিডল গ্রাউন্ড এবং ফরগ্রাউন্ড।- প্রতিটি লেয়ার আলাদা আলাদা ইমেজের মাধ্যমে কনফিগার করা হয়েছে এবং স্ক্রল করার সময় তাদের গতির পার্থক্য তৈরি হবে।
- CSS:
.parallax-layerক্লাসেposition: absoluteএবংbackground-size: coverব্যবহার করে প্রতিটি লেয়ারকে সঠিক জায়গায় ফিট করা হয়েছে।.background,.midground, এবং.foregroundক্লাসে আলাদা ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে, যা স্ক্রলিংয়ের সময় বিভিন্ন গতিতে চলবে।.contentসেকশনটিকে সেন্টার করা হয়েছে এবং অন্যান্য লেয়ারগুলির উপরে থাকছে যাতে কন্টেন্ট দৃশ্যমান থাকে।
- JavaScript:
window.addEventListener('scroll')ইভেন্ট ব্যবহার করে আমরা স্ক্রল ইভেন্ট ট্র্যাক করেছি এবং স্ক্রল পজিশন অনুযায়ী প্রতিটি লেয়ারেরtranslateYপ্রপার্টি পরিবর্তন করেছি।- ব্যাকগ্রাউন্ডের গতি
scrollPosition * 0.4(ধীরে), মিডল গ্রাউন্ডের গতিscrollPosition * 0.6, এবং ফরগ্রাউন্ডের গতিscrollPosition * 0.8(দ্রুত) হবে।
ফলস্বরূপ
এই কোডটি ব্যবহারের মাধ্যমে আপনি একটি multi-layer parallax scrolling effect তৈরি করতে পারবেন, যেখানে ব্যাকগ্রাউন্ড, মিডল গ্রাউন্ড, এবং ফরগ্রাউন্ড আলাদা গতিতে স্ক্রল করবে এবং একটি ডাইনামিক, গভীরতার অনুভূতি তৈরি করবে।
Multi-layer Parallax Scrolling ওয়েব ডিজাইনকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে। JavaScript এবং CSS এর মাধ্যমে এই ইফেক্টটি সহজে কাস্টমাইজ করা যায় এবং ব্যবহারকারীর অভিজ্ঞতাকে একটি নতুন মাত্রা দেয়।
Read more
