Multiple Layers Parallax Scrolling হল একটি উন্নত প্যারালাক্স স্ক্রলিং টেকনিক, যেখানে একাধিক স্তরের ব্যাকগ্রাউন্ড এবং কন্টেন্ট স্ক্রলিংয়ের সময় ভিন্ন গতিতে চলতে থাকে। এর ফলে, ওয়েবপেজে আরও গভীরতা এবং ত্রিমাত্রিক (3D) প্রভাব সৃষ্টি হয়। CSS এবং JavaScript এর মাধ্যমে এই ধরনের স্ক্রলিং তৈরি করা সম্ভব। এখানে আমরা CSS এর মাধ্যমে Multiple Layers Srallax Scrolling তৈরি করার প্রক্রিয়া দেখব।
Multiple Layers Srallax Scrolling তৈরির পদক্ষেপ
- HTML স্ট্রাকচার তৈরি করা: প্রথমে ওয়েবপেজের জন্য একাধিক স্তর (layers) তৈরি করতে হবে। এখানে আমরা কয়েকটি স্তরের ব্যাকগ্রাউন্ড ব্যবহার করব এবং প্রতিটি স্তরের গতির পার্থক্য তৈরি করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Layers Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-layer layer1"></div>
<section class="content">
<h1>Welcome to the Multiple Layers Parallax Effect</h1>
<p>This effect uses multiple layers moving at different speeds.</p>
</section>
<div class="parallax-layer layer2"></div>
<section class="content">
<h1>Another Section</h1>
<p>Experience the depth of parallax scrolling with multiple layers.</p>
</section>
<div class="parallax-layer layer3"></div>
</body>
</html>
- CSS কোড লেখা: এখানে আমরা তিনটি স্তর (layer1, layer2, layer3) তৈরি করব এবং প্রতিটির স্ক্রলিং গতির পার্থক্য তৈরি করব। প্রতিটি স্তরের জন্য আলাদা স্কেল এবং পজিশনিং প্রপার্টি ব্যবহার করব, যাতে তারা ভিন্ন গতিতে স্ক্রল করে।
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow-x: hidden;
}
.parallax-layer {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.layer1 {
background-image: url('https://via.placeholder.com/1920x1080?text=Layer+1');
z-index: -1;
transform: translateZ(-1px) scale(2); /* Slowest layer */
}
.layer2 {
background-image: url('https://via.placeholder.com/1920x1080?text=Layer+2');
z-index: -2;
transform: translateZ(-0.5px) scale(1.5); /* Middle layer */
}
.layer3 {
background-image: url('https://via.placeholder.com/1920x1080?text=Layer+3');
z-index: -3;
transform: translateZ(0px) scale(1); /* Fastest layer */
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
position: relative;
z-index: 1;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
max-width: 800px;
}
কোড ব্যাখ্যা
.parallax-layer:position: fixed: এই প্রপার্টি ব্যাকগ্রাউন্ড লেয়ারের অবস্থান স্থির রাখে, যাতে স্ক্রলিংয়ের সময় এটি ফিক্সড থাকে।background-position: center: ব্যাকগ্রাউন্ড ইমেজের অবস্থান কেন্দ্রিত থাকে।background-size: cover: ব্যাকগ্রাউন্ডের সাইজ পেজের পুরো পৃষ্ঠায় কভার হবে।transform: translateZ() scale(): এই প্রপার্টিগুলি ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি করে, যেখানেtranslateZগভীরতার অনুভূতি সৃষ্টি করে এবংscaleব্যাকগ্রাউন্ডের আকার নিয়ন্ত্রণ করে। প্রতিটি স্তরের জন্য ভিন্ন ভিন্ন মান ব্যবহৃত হয়েছে।
.content:height: 100vh: প্রতিটি কন্টেন্ট সেকশন পুরো স্ক্রীন উচ্চতা নেয়।position: relative: কন্টেন্ট সেকশনকে অন্য লেয়ারদের উপরে অবস্থান করতে সাহায্য করে।
কার্যকারিতা
layer1: এই স্তরের ব্যাকগ্রাউন্ড স্ক্রল হবে সবচেয়ে ধীরে। এটি অতিরিক্ত স্কেল করা হয়েছে যাতে এটি আরও দূরের মনে হয়।layer2: এই স্তরের ব্যাকগ্রাউন্ড মিডিয়াম গতিতে স্ক্রল হবে এবং একটু ছোট স্কেলে থাকবে।layer3: এই স্তরের ব্যাকগ্রাউন্ড সবচেয়ে দ্রুত স্ক্রল হবে এবং এটি সাধারণ আকারে থাকবে।
ফলস্বরূপ
এই কোডে, তিনটি স্তর (layer1, layer2, layer3) আলাদা গতিতে স্ক্রল হবে, এবং ব্যবহারকারীরা স্ক্রল করার সময় একটি ত্রিমাত্রিক বা ডাইনামিক প্রভাব অনুভব করবে। এর মাধ্যমে গভীরতা, পরিসর এবং ইন্টারঅ্যাকটিভ অনুভূতি তৈরি হবে।
Multiple Layers Parallax Scrolling CSS এর মাধ্যমে তৈরি করা ওয়েবপেজে গভীরতা এবং বাস্তব অনুভূতি যোগ করতে সহায়তা করে। এটি বিশেষ করে ল্যান্ডিং পেজ, পোর্টফোলিও সাইট বা সৃজনশীল প্রকল্পের জন্য খুবই কার্যকরী।
প্যারালাক্স স্ক্রলিং টেকনিক একাধিক স্তরের মধ্যে স্ক্রলিং গতির পার্থক্য তৈরি করে, যা ওয়েবপেজে একটি ত্রিমাত্রিক (3D) অনুভূতি প্রদান করে। একাধিক ব্যাকগ্রাউন্ড ইমেজ এবং কন্টেন্টের মাধ্যমে Srallax স্ক্রলিং তৈরি করা হলে, ব্যবহারকারীরা একটি ডাইনামিক এবং চিত্তাকর্ষক অভিজ্ঞতা পায়।
এখানে দেখানো হবে কীভাবে একাধিক ব্যাকগ্রাউন্ড ইমেজ এবং কন্টেন্টের জন্য Srallax তৈরি করা যায়, যাতে স্ক্রলিংয়ের সময় ভিন্ন ভিন্ন ব্যাকগ্রাউন্ডে এবং কন্টেন্টে গতির পার্থক্য দেখা যায়।
একাধিক ব্যাকগ্রাউন্ড ইমেজ সহ Srallax তৈরি করা
একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করার মাধ্যমে প্যারালাক্স স্ক্রলিং তৈরি করতে, CSS এর background-image প্রপার্টি এবং background-attachment: fixed; ব্যবহার করা হয়। এখানে প্রতিটি ব্যাকগ্রাউন্ড ইমেজের জন্য আলাদা আলাদা স্ক্রলিং ইফেক্ট তৈরি করা হয়।
HTML স্ট্রাকচার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multi-Background Parallax Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-background"></div>
<section class="content">
<h1>Explore Parallax Scrolling</h1>
<p>This is an example of using multiple background images for Parallax scrolling.</p>
</section>
<div class="parallax-background"></div>
<section class="content">
<h1>Another Section</h1>
<p>The content scrolls with different speeds than the background.</p>
</section>
</body>
</html>
CSS কোড
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
.parallax-background {
height: 100vh;
background-image: url('background1.jpg'), url('background2.jpg'); /* একাধিক ব্যাকগ্রাউন্ড ইমেজ */
background-position: center center, center center;
background-size: cover, cover;
background-attachment: fixed, fixed; /* প্যারালাক্স ইফেক্ট তৈরি */
background-repeat: no-repeat, no-repeat;
}
.content {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background-color: #fff;
}
h1 {
font-size: 3rem;
margin-bottom: 20px;
}
p {
font-size: 1.5rem;
max-width: 800px;
}
কোড ব্যাখ্যা
.parallax-backgroundক্লাস:background-image: url('background1.jpg'), url('background2.jpg');: এখানে দুটি ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা হয়েছে। প্রথমটি ব্যাকগ্রাউন্ডের প্রথম স্তরের জন্য এবং দ্বিতীয়টি দ্বিতীয় স্তরের জন্য।background-attachment: fixed, fixed;: এই প্রপার্টি দুটি ব্যাকগ্রাউন্ডের জন্য ফিক্সড অবস্থান নির্ধারণ করে, যাতে স্ক্রল করার সময় ব্যাকগ্রাউন্ডগুলি স্থির থাকে এবং কন্টেন্ট সাধারণভাবে স্ক্রল হয়।background-position: center center, center center;: এই প্রপার্টি দুটি ব্যাকগ্রাউন্ড ইমেজের অবস্থান কেন্দ্রিত করে দেয়।background-size: cover, cover;: দুটি ব্যাকগ্রাউন্ড ইমেজের আকার সঠিকভাবে পূর্ণ স্ক্রীন আকারে হবে।
.contentক্লাস:height: 100vh;: প্রতিটি কন্টেন্ট সেকশন পূর্ণ স্ক্রীন আকারে থাকবে।display: flex,justify-content: center,align-items: center;: কন্টেন্ট সেকশনটিকে সেন্টার করা হয়েছে, যাতে টেক্সট এবং অন্যান্য উপাদান স্ক্রীনের মাঝখানে অবস্থান করে।
কীভাবে এটি কাজ করে
- ব্যাকগ্রাউন্ড ইমেজ: যখন ব্যবহারকারী স্ক্রল করে, ব্যাকগ্রাউন্ড ইমেজগুলি স্ক্রলিংয়ের সঙ্গে স্থির অবস্থানে থাকে, কিন্তু কন্টেন্টটি দ্রুত স্ক্রল হয়। এতে একটি গভীরতা এবং ত্রিমাত্রিক প্রভাব সৃষ্টি হয়।
- একাধিক স্তর: এখানে দুটি ব্যাকগ্রাউন্ড স্তর (layers) ব্যবহার করা হয়েছে। প্রতি স্তরের স্ক্রলিং গতি আলাদা হতে পারে, যা আরও ডাইনামিক ইফেক্ট তৈরি করে।
পারফরমেন্স এবং সীমাবদ্ধতা
- পারফরমেন্স: একাধিক ব্যাকগ্রাউন্ড ইমেজ ব্যবহারে পারফরমেন্সে কিছুটা প্রভাব পড়তে পারে, বিশেষ করে মোবাইল ডিভাইসে। তবে সঠিক আকারের ইমেজ ব্যবহার করলে এটি সহনীয় হতে পারে।
- মোবাইল ডিভাইস: কিছু মোবাইল ব্রাউজার
background-attachment: fixed;সমর্থন করে না, তবে CSS Media Queries ব্যবহার করে মোবাইলের জন্য আলাদা স্টাইল তৈরি করা সম্ভব।
মোবাইল উপযোগিতা
মোবাইলের জন্য ব্যাকগ্রাউন্ড ফিক্সড ইফেক্ট সমর্থিত না হলে, CSS মিডিয়া কুয়েরি ব্যবহার করে এই ইফেক্টটি অক্ষম করা যেতে পারে:
@media (max-width: 768px) {
.parallax-background {
background-attachment: scroll; /* মোবাইলের জন্য স্ক্রলিং ব্যাকগ্রাউন্ড */
}
}
একাধিক ব্যাকগ্রাউন্ড ইমেজ সহ প্যারালাক্স স্ক্রলিং একটি অত্যন্ত আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ওয়েব ডিজাইন টেকনিক, যা ব্যবহারকারীদের এক নতুন ধরনের অভিজ্ঞতা প্রদান করে। এটি ওয়েবপেজে গভীরতা এবং ডাইনামিক ইফেক্ট যুক্ত করে, তবে মোবাইল ডিভাইসে কিছু সীমাবদ্ধতা থাকতে পারে।
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 এর মাধ্যমে এই ইফেক্টটি সহজে কাস্টমাইজ করা যায় এবং ব্যবহারকারীর অভিজ্ঞতাকে একটি নতুন মাত্রা দেয়।
প্যারালাক্স স্ক্রলিং এর মূল ধারণা হলো ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য সৃষ্টি করা, যা ওয়েবপেজে গভীরতা এবং ত্রিমাত্রিক (3D) ইফেক্ট তৈরি করে। এই ইফেক্টে একাধিক লেয়ার থাকে, এবং প্রতিটি লেয়ারের স্ক্রল স্পিড আলাদা হতে পারে। এর মাধ্যমে সাইটে একটি ডাইনামিক, আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অনুভূতি তৈরি হয়।
Layers এর জন্য বিভিন্ন Scroll Speed সেট করার পদ্ধতি
প্যারালাক্স স্ক্রলিংয়ে বিভিন্ন লেয়ারের জন্য আলাদা স্ক্রল স্পিড সেট করা হয় যাতে ব্যাকগ্রাউন্ড এবং কন্টেন্ট ভিন্ন গতিতে স্ক্রল করে। এটি JavaScript অথবা jQuery এর মাধ্যমে কনফিগার করা যায়।
উদাহরণ: একাধিক লেয়ার জন্য ভিন্ন স্ক্রল স্পিড
ধরা যাক, আমাদের একটি সাইট রয়েছে যেখানে একাধিক লেয়ার ব্যবহার করা হয়েছে, যেমন:
- ব্যাকগ্রাউন্ড লেয়ার (slow scrolling)
- ফ্রন্ট কন্টেন্ট লেয়ার (fast scrolling)
আমরা JavaScript এর মাধ্যমে এই লেয়ারগুলির জন্য আলাদা স্ক্রল স্পিড সেট করতে পারব।
১. 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 Scroll Speeds</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-layer" id="layer1"></div> <!-- Background Layer -->
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>Scroll down to see the effect with different scroll speeds for layers.</p>
</div>
<div class="parallax-layer" id="layer2"></div> <!-- Middle Layer -->
<div class="content">
<h2>Enjoy the experience!</h2>
</div>
<div class="parallax-layer" 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-layer {
position: fixed;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#layer1 {
background-image: url('your-background-image.jpg'); /* Background Image */
z-index: -2; /* Set layer below other content */
}
#layer2 {
background-image: url('your-second-image.jpg'); /* Middle Layer Image */
z-index: -1; /* Middle layer */
}
#layer3 {
background-image: url('your-third-image.jpg'); /* Front Layer Image */
z-index: 1; /* Front layer */
}
.content {
text-align: center;
padding: 40px;
background-color: white;
z-index: 2;
}
এখানে তিনটি প্যারালাক্স লেয়ার ব্যবহার করা হয়েছে এবং প্রত্যেকটি লেয়ারের জন্য আলাদা ব্যাকগ্রাউন্ড ইমেজ যোগ করা হয়েছে। z-index প্রপার্টি ব্যবহার করে লেয়ারগুলিকে উপরে বা নিচে সাজানো হয়েছে।
৩. JavaScript এর মাধ্যমে বিভিন্ন Scroll Speed সেট করা
এখন, JavaScript কোডের মাধ্যমে প্রতিটি লেয়ারের জন্য আলাদা স্ক্রল স্পিড সেট করা হবে।
// script.js
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
// Background Layer (Slow Scroll)
var layer1 = document.getElementById('layer1');
layer1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
// Middle Layer (Medium Scroll)
var layer2 = document.getElementById('layer2');
layer2.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
// Front Layer (Fast Scroll)
var layer3 = document.getElementById('layer3');
layer3.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
});
ব্যাখ্যা:
- scrollY:
window.scrollYস্ক্রল পজিশন ট্র্যাক করে, অর্থাৎ স্ক্রল কতটা নিচে গিয়েছে তা মাপতে সহায়তা করে। - Scroll Speed:
scrollPosition * 0.3,scrollPosition * 0.5, এবংscrollPosition * 0.7বিভিন্ন লেয়ারের স্ক্রল স্পিড কন্ট্রোল করে। এই সংখ্যাগুলির মাধ্যমে, ব্যাকগ্রাউন্ড লেয়ারটি ধীরে স্ক্রল হবে, মিডল লেয়ারটি একটু দ্রুত এবং ফ্রন্ট লেয়ারটি আরও দ্রুত স্ক্রল হবে।
৪. পর্যালোচনা
- ব্যাকগ্রাউন্ড লেয়ার (Layer1): এটি খুব ধীরে স্ক্রল হবে, কারণ আমরা এর জন্য স্ক্রল স্পিড 0.3 দিয়েছি।
- মিডল লেয়ার (Layer2): এটি একটু দ্রুত স্ক্রল হবে, কারণ স্ক্রল স্পিড 0.5।
- ফ্রন্ট লেয়ার (Layer3): এটি দ্রুত স্ক্রল হবে, কারণ স্ক্রল স্পিড 0.7।
৫. পারফরম্যান্স টিপস
- যদি অনেক লেয়ার এবং ভারী গ্রাফিক্স থাকে, তবে পারফরম্যান্স ইস্যু হতে পারে। এতে requestAnimationFrame() ব্যবহার করা যেতে পারে, যা স্ক্রল ইভেন্টের জন্য অ্যানিমেশনকে মসৃণভাবে রেন্ডার করতে সাহায্য করবে।
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
var scrollPosition = window.scrollY;
var layer1 = document.getElementById('layer1');
layer1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
var layer2 = document.getElementById('layer2');
layer2.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
var layer3 = document.getElementById('layer3');
layer3.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
});
});
সারাংশ
প্যারালাক্স স্ক্রলিংয়ে Layers এর জন্য বিভিন্ন Scroll Speed সেট করা একটি শক্তিশালী উপায় যা ওয়েবপেজে গভীরতা এবং ডাইনামিক ইফেক্ট তৈরি করে। JavaScript ব্যবহার করে, আপনি বিভিন্ন লেয়ারগুলির জন্য আলাদা স্ক্রল স্পিড নিয়ন্ত্রণ করতে পারেন, যা ব্যবহারকারীদের জন্য একটি চিত্তাকর্ষক এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা তৈরি করে।
Multi-layer Srallax Scrolling ওয়েব ডিজাইনে একটি উন্নত পদ্ধতি, যেখানে একাধিক লেয়ারকে প্যারালাক্স স্ক্রলিং ইফেক্টে ব্যবহার করা হয়। এটি ওয়েবসাইটে গভীরতা এবং ডাইনামিক অনুভূতি প্রদান করে, তবে এটি সঠিকভাবে প্রয়োগ করা খুব গুরুত্বপূর্ণ, কারণ এটি অতিরিক্ত ভারী হতে পারে এবং পারফরমেন্সের সমস্যা সৃষ্টি করতে পারে। নিচে Multi-layer Srallax এর জন্য কিছু Best Practices আলোচনা করা হলো।
১. লেয়ারের সঠিক সংখ্যা নির্বাচন করা
Multi-layer Srallax এ অতিরিক্ত লেয়ার ব্যবহার করা অনেক সময় পেজের পারফরমেন্সে সমস্যা সৃষ্টি করতে পারে। অতএব, সঠিক সংখ্যক লেয়ার ব্যবহার করা গুরুত্বপূর্ণ।
- Best Practice: কমপক্ষে ২ থেকে ৩টি লেয়ার ব্যবহার করুন, কারণ বেশি লেয়ার ব্যবহার করলে ব্রাউজারের লোড টাইম বৃদ্ধি পেতে পারে এবং পারফরমেন্স হ্রাস পেতে পারে। আপনি ব্যাকগ্রাউন্ড, মিডগ্রাউন্ড এবং ফরওয়ার্ড লেয়ার ব্যবহার করতে পারেন।
২. লেয়ারগুলির গতি সামঞ্জস্য করা
Multi-layer Srallax এ প্রতিটি লেয়ারের গতি পৃথকভাবে নির্ধারণ করা উচিত, যাতে একটি প্রকৃত প্যারালাক্স ইফেক্ট তৈরি হয়। ফরওয়ার্ড লেয়ারটি দ্রুত এবং ব্যাকগ্রাউন্ড লেয়ারটি ধীরে স্ক্রল হওয়া উচিত।
- Best Practice:
- ব্যাকগ্রাউন্ড লেয়ারের গতি কম করুন (যেমন
offset * 0.2বা কম) - ফরওয়ার্ড লেয়ারটির গতি দ্রুত রাখুন (যেমন
offset * 1.5)
- ব্যাকগ্রাউন্ড লেয়ারের গতি কম করুন (যেমন
এটি একটি বাস্তব অনুভূতি তৈরি করবে এবং ব্যবহারকারীর অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ করবে।
উদাহরণ:
// ব্যাকগ্রাউন্ড লেয়ার
background.style.backgroundPosition = 'center ' + (offset * 0.2) + 'px';
// মিডগ্রাউন্ড লেয়ার
midLayer.style.transform = 'translateY(' + (offset * 0.5) + 'px)';
// ফরওয়ার্ড লেয়ার
foreground.style.transform = 'translateY(' + (offset * 1.5) + 'px)';
৩. স্মুথ স্ক্রলিং এবং অ্যানিমেশন ব্যবহার করা
যত বেশি লেয়ার এবং অ্যানিমেশন থাকবে, তত বেশি স্লো এবং ঝাপসা অনুভূতি সৃষ্টি হতে পারে। স্মুথ স্ক্রলিং এবং অ্যানিমেশন ব্যবহার করা উচিত, যাতে স্ক্রলিংটা আরো প্রাকৃতিক এবং স্লো হয়।
- Best Practice:
transformএবংtransitionপ্রপার্টি ব্যবহার করুন, যা ব্রাউজারের রেন্ডারিং পারফরমেন্সে প্রভাব ফেলবে না।
উদাহরণ:
.parallax-background, .parallax-mid, .parallax-foreground {
transition: transform 0.1s ease-out;
}
৪. লেয়ারগুলোর অপটিমাইজেশন
প্রতিটি লেয়ারের জন্য গ্রাফিক্স বা মিডিয়া ফাইল অপটিমাইজ করা উচিত। বড় আকারের ইমেজ বা ভিডিও ব্যাকগ্রাউন্ড ব্যবহার করলে লোডিং টাইম এবং পারফরমেন্সের সমস্যা হতে পারে।
- Best Practice:
- কম্প্রেসড ইমেজ ব্যবহার করুন
- WebP বা SVG ফর্ম্যাটে ইমেজ ব্যবহার করা যেতে পারে, কারণ এগুলো ছোট আকারে থাকে এবং দ্রুত লোড হয়।
৫. মোবাইল ডিভাইসে প্যারালাক্স বন্ধ করা
মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিংয়ের পারফরমেন্স অনেক কম হতে পারে, এবং বিশেষ করে একাধিক লেয়ার ব্যবহার করলে এটি আরও বেশি সমস্যার সৃষ্টি করতে পারে। তাই মোবাইল ডিভাইসে প্যারালাক্স ইফেক্ট বন্ধ করা উচিত।
- Best Practice: মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করুন বা কমিয়ে দিন।
উদাহরণ:
@media (max-width: 768px) {
.parallax-background, .parallax-mid, .parallax-foreground {
background-attachment: scroll; /* মোবাইলে প্যারালাক্স বন্ধ */
}
}
৬. লোড টাইম এবং পারফরমেন্স মনিটরিং
Multi-layer Srallax প্রয়োগের আগে এবং পরে ওয়েবসাইটের পারফরমেন্স পরীক্ষা করা গুরুত্বপূর্ণ। অত্যধিক লেয়ার এবং অ্যানিমেশন পারফরমেন্সের উপর খারাপ প্রভাব ফেলতে পারে, যার কারণে ওয়েবসাইট স্লো হতে পারে। তাই লোডিং টাইম এবং স্ক্রলিংয়ের মসৃণতা মনিটর করা উচিত।
- Best Practice: ওয়েবসাইটের লোড টাইম কমাতে Lazy Loading এবং Asynchronous Loading ব্যবহার করুন। এছাড়া, Chrome DevTools বা অন্য টুল ব্যবহার করে পারফরমেন্স চেক করুন।
৭. ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করা
সব ব্রাউজারে একে অপরের মতো কাজ নাও করতে পারে। তাই বিভিন্ন ব্রাউজারে প্যারালাক্স স্ক্রলিংয়ের কাজ করার বিষয়টি নিশ্চিত করা উচিত।
- Best Practice: প্যারালাক্স স্ক্রলিংয়ের জন্য CSS prefixes এবং fallbacks ব্যবহার করা উচিত, যেন পুরনো ব্রাউজারেও এটি সঠিকভাবে কাজ করে।
উদাহরণ:
.parallax-background {
background-attachment: fixed; /* সাপোর্ট করে না এমন ব্রাউজারে */
-webkit-background-attachment: fixed; /* WebKit ব্রাউজার */
background-position: center;
}
সারাংশ
Multi-layer Srallax Scrolling একটি অত্যন্ত কার্যকরী এবং আকর্ষণীয় ডিজাইন টেকনিক, যা ওয়েবসাইটে গভীরতা এবং ইন্টারঅ্যাকটিভ অনুভূতি যোগ করতে পারে। তবে, এর সঠিক প্রয়োগের জন্য কিছু Best Practices অনুসরণ করা প্রয়োজন:
- কম লেয়ার ব্যবহার করা
- লেয়ারগুলির গতি সঠিকভাবে সামঞ্জস্য করা
- স্মুথ স্ক্রলিং এবং অ্যানিমেশন ব্যবহার করা
- গ্রাফিক্স এবং মিডিয়া অপটিমাইজেশন
- মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করা
- পারফরমেন্স মনিটরিং এবং ব্রাউজার কম্প্যাটিবিলিটি নিশ্চিত করা
এই টিপসগুলো অনুসরণ করলে আপনি একটি আকর্ষণীয়, পারফরম্যান্স-বন্ধনীয়, এবং ব্যবহারকারীর জন্য উপযুক্ত ওয়েবসাইট তৈরি করতে পারবেন।
Read more
