প্যারালাক্স স্ক্রলিং টেকনিক একাধিক স্তরের মধ্যে স্ক্রলিং গতির পার্থক্য তৈরি করে, যা ওয়েবপেজে একটি ত্রিমাত্রিক (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; /* মোবাইলের জন্য স্ক্রলিং ব্যাকগ্রাউন্ড */
}
}
একাধিক ব্যাকগ্রাউন্ড ইমেজ সহ প্যারালাক্স স্ক্রলিং একটি অত্যন্ত আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ ওয়েব ডিজাইন টেকনিক, যা ব্যবহারকারীদের এক নতুন ধরনের অভিজ্ঞতা প্রদান করে। এটি ওয়েবপেজে গভীরতা এবং ডাইনামিক ইফেক্ট যুক্ত করে, তবে মোবাইল ডিভাইসে কিছু সীমাবদ্ধতা থাকতে পারে।
Read more
