প্যারালাক্স স্ক্রলিং ইফেক্ট ওয়েব ডিজাইনে একটি ডাইনামিক এবং আকর্ষণীয় অভিজ্ঞতা তৈরি করতে ব্যবহৃত হয়। তবে, সঠিক লেআউট ডিজাইন করা প্রয়োজন যাতে স্ক্রলিং ইফেক্ট সুন্দরভাবে প্রদর্শিত হয়। এখানে CSS Grid এবং Flexbox ব্যবহার করে প্যারালাক্স স্ক্রলিংয়ের জন্য একটি রেসপন্সিভ এবং স্থিতিশীল লেআউট তৈরি করা হবে।
১. CSS Grid ব্যবহার করে Layout তৈরি
CSS Grid একটি শক্তিশালী লেআউট টুল যা 2D গ্রিড সিস্টেমে উপাদানগুলিকে সজ্জিত করতে ব্যবহৃত হয়। প্যারালাক্স স্ক্রলিংয়ের জন্য এই টুলটি ব্যবহার করে একটি সুন্দর এবং রেসপন্সিভ লেআউট তৈরি করা যায়।
উদাহরণ: CSS Grid এর মাধ্যমে প্যারালাক্স স্ক্রলিং লেআউট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax with CSS Grid</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>This is an example of parallax scrolling using CSS Grid.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS কোড:
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
/* Parallax Container */
.parallax-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 100vh 1fr;
position: relative;
}
/* Parallax Background */
.parallax-background {
grid-row: 1 / 2;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: url('your-image.jpg'); /* Add your background image */
background-attachment: fixed;
background-position: center;
background-size: cover;
z-index: -1;
}
/* Content */
.content {
grid-row: 2 / 3;
padding: 20px;
text-align: center;
background-color: white;
}
/* Styling for text */
h1 {
font-size: 3em;
color: #333;
}
p {
font-size: 1.5em;
color: #555;
}
ব্যাখ্যা:
- Grid Container:
.parallax-containerএকটি CSS গ্রিড কন্টেইনার হিসেবে কাজ করছে, যেখানে প্রথম রো (রঙ) পূর্ণ দৃশ্যমান উচ্চতা নিয়ে থাকে এবং দ্বিতীয় রো কন্টেন্টের জন্য ব্যবহার করা হয়েছে। - Parallax Background:
.parallax-backgroundএর মধ্যে ব্যাকগ্রাউন্ড ইমেজ দেওয়া হয়েছে, যা স্ক্রল করার সময় ধীরে ধীরে পরিবর্তিত হবে, এতে একটি প্যারালাক্স ইফেক্ট তৈরি হবে।
২. Flexbox ব্যবহার করে Layout তৈরি
Flexbox একটি একমাত্রিক লেআউট সিস্টেম, যা উপাদানগুলিকে সহজেই সমানভাবে সাজাতে সাহায্য করে। প্যারালাক্স স্ক্রলিংয়ের জন্য এটি একটি দারুণ টুল, কারণ এটি সহজে সেন্টারিং, সাইজিং এবং ভাঁজ করা উপাদানগুলির জন্য উপযোগী।
উদাহরণ: Flexbox এর মাধ্যমে প্যারালাক্স স্ক্রলিং লেআউট
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax with Flexbox</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>This is an example of parallax scrolling using Flexbox.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS কোড:
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
/* Parallax Container */
.parallax-container {
display: flex;
flex-direction: column;
height: 100%;
position: relative;
}
/* Parallax Background */
.parallax-background {
flex: 1;
background-image: url('your-image.jpg'); /* Add your background image */
background-attachment: fixed;
background-position: center;
background-size: cover;
}
/* Content */
.content {
padding: 20px;
text-align: center;
background-color: white;
}
/* Styling for text */
h1 {
font-size: 3em;
color: #333;
}
p {
font-size: 1.5em;
color: #555;
}
ব্যাখ্যা:
- Flexbox Container:
.parallax-containerএকটি Flexbox কন্টেইনার হিসেবে কাজ করছে, যেখানে ফ্লেক্স কনটেন্টগুলি ভ্যাটিক্যালি সাজানো হয়েছে। - Parallax Background:
.parallax-backgroundব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিংয়ের সময় স্থির রাখতেbackground-attachment: fixed;ব্যবহার করা হয়েছে, যা প্যারালাক্স ইফেক্ট তৈরি করবে।
৩. CSS Grid এবং Flexbox এর মধ্যে পার্থক্য
- CSS Grid:
- এটি 2D লেআউট সিস্টেম, যা এক্স এবং ওয়াই অক্ষের (X and Y axes) উপর ভিত্তি করে উপাদান সাজায়।
- গ্রিড লেআউটটি কন্টেইনারের মধ্যে উপাদানগুলোকে লাইনের মাধ্যমে সাজাতে খুবই উপযোগী।
- প্যারালাক্স ইফেক্টে ব্যাকগ্রাউন্ড ইমেজের জন্য এটি অধিক উপযুক্ত, কারণ আপনি গ্রিডের মাধ্যমে পুরো লেআউটকে পরিচালনা করতে পারেন।
- Flexbox:
- এটি 1D লেআউট সিস্টেম, যা একমাত্রিক ভাবে উপাদানগুলোকে সাজায় (যেমন, এক সারিতে বা এক কলামে)।
- Flexbox সহজে উপাদানগুলিকে কেন্দ্রীভূত (center), সমানভাবে বা স্পেস-ডিস্ট্রিবিউট (space-distribute) করতে সাহায্য করে।
- এটি ছোট সেকশন বা কন্টেন্টের জন্য উপযুক্ত এবং ছোট স্ক্রিনে খুব ভালো কাজ করে।
সারাংশ
CSS Grid এবং Flexbox প্যারালাক্স স্ক্রলিংয়ের জন্য দুইটি শক্তিশালী টুল, যা ওয়েবপেজের লেআউটকে সুন্দরভাবে সাজাতে সাহায্য করে। CSS Grid 2D লেআউট তৈরি করতে উপযোগী, যেখানে Flexbox একমাত্রিক লেআউট তৈরি করার জন্য ভালো। আপনি আপনার প্রোজেক্টের প্রয়োজন অনুযায়ী এই দুইটি টুলের মধ্যে একটি নির্বাচন করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারেন।
Read more
