প্যারালাক্স স্ক্রলিং একটি অত্যন্ত জনপ্রিয় ওয়েব ডিজাইন টেকনিক, যা ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য তৈরি করে একটি ডাইনামিক এবং গভীরতাময় অভিজ্ঞতা সৃষ্টি করে। তবে, ওয়েবসাইটের responsive design নিশ্চিত করতে, বিশেষ করে মোবাইল ডিভাইসে, responsive images এবং media queries ব্যবহার করা অত্যন্ত গুরুত্বপূর্ণ।
এই টিউটোরিয়ালে, আমরা শিখব কিভাবে responsive images ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে হয় এবং media queries দিয়ে বিভিন্ন ডিভাইসের জন্য স্টাইল কাস্টমাইজ করা যায়।
Responsive Images ব্যবহার
Responsive images এর মাধ্যমে, আপনি ওয়েবপেজে বিভিন্ন স্ক্রিন সাইজের জন্য উপযুক্ত ছবি প্রদর্শন করতে পারেন। এটি ওয়েবপেজের লোডিং টাইম এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। <picture>, srcset, এবং sizes অ্যাট্রিবিউটগুলি ব্যবহারের মাধ্যমে আপনি বিভিন্ন রেজোলিউশনের জন্য ছবি প্রদর্শন করতে পারেন।
১. HTML এর মাধ্যমে Responsive Images
এখানে, আমরা <picture> এবং srcset ব্যবহার করে বিভিন্ন স্ক্রিন সাইজের জন্য উপযুক্ত ব্যাকগ্রাউন্ড ইমেজ লোড করব।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section with Responsive Image -->
<div class="parallax-section">
<h2>Responsive Parallax Effect</h2>
</div>
<div class="content">
<p>This content stays static during scrolling.</p>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS এর মাধ্যমে Responsive Image Style
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Parallax Section */
.parallax-section {
height: 100vh;
background-image: url('image-large.jpg'); /* Default image */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
/* Content Section */
.content {
padding: 50px;
background-color: #f4f4f4;
text-align: center;
}
.content p {
font-size: 1.5rem;
}
৩. srcset এবং sizes অ্যাট্রিবিউট ব্যবহার
srcset অ্যাট্রিবিউট দিয়ে আপনি বিভিন্ন রেজোলিউশনের ছবি লোড করতে পারেন। এছাড়া sizes অ্যাট্রিবিউট দিয়ে আপনি বিভিন্ন স্ক্রিন সাইজে ছবি কতটা বড় হবে, তা নির্ধারণ করতে পারেন।
<div class="parallax-section">
<picture>
<source srcset="image-small.jpg" media="(max-width: 600px)">
<source srcset="image-medium.jpg" media="(max-width: 1024px)">
<img src="image-large.jpg" alt="Parallax Image">
</picture>
<h2>Responsive Parallax Effect</h2>
</div>
এখানে, <picture> ট্যাগ ব্যবহার করে তিনটি আলাদা ইমেজ রেজোলিউশন তৈরি করা হয়েছে:
- image-small.jpg: ছোট স্ক্রীন (মোবাইল) এর জন্য।
- image-medium.jpg: মিডিয়াম স্ক্রীন (ট্যাবলেট) এর জন্য।
- image-large.jpg: বড় স্ক্রীন (ডেস্কটপ) এর জন্য।
এভাবে, ওয়েব ব্রাউজার স্বয়ংক্রিয়ভাবে সঠিক ইমেজটি লোড করবে, যেটি ডিভাইসের স্ক্রীন সাইজের সাথে উপযুক্ত।
Media Queries ব্যবহার
Media Queries ব্যবহার করে আপনি ওয়েবসাইটের ডিজাইন এবং লেআউটকে বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করতে পারেন। এটি প্যারালাক্স স্ক্রলিং এর ইফেক্ট এবং ছবির প্রদর্শনও নিয়ন্ত্রণ করে।
১. Basic Media Query for Mobile Devices
/* Default styling (Desktop) */
.parallax-section {
background-image: url('image-large.jpg');
}
@media only screen and (max-width: 1024px) {
/* For Tablets */
.parallax-section {
background-image: url('image-medium.jpg');
}
}
@media only screen and (max-width: 600px) {
/* For Mobile */
.parallax-section {
background-image: url('image-small.jpg');
}
}
এখানে, আমরা প্রথমে ডেস্কটপের জন্য একটি বড় ইমেজ লোড করেছি, তারপর ট্যাবলেট এবং মোবাইলের জন্য আলাদা ইমেজ লোড করেছি, যাতে প্রতিটি ডিভাইসে ওয়েবপেজের লোড টাইম এবং উপস্থাপন আরও দ্রুত এবং উপযোগী হয়।
২. Mobile-Friendly Parallax Scrolling
যেহেতু প্যারালাক্স স্ক্রলিং ওয়েবপেজের ব্যাকগ্রাউন্ডে ঘটে, এবং মোবাইল ডিভাইসে এটি ভালোভাবে কাজ নাও করতে পারে, সেজন্য মিডিয়া কুয়েরির মাধ্যমে মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করা যায়।
@media only screen and (max-width: 600px) {
.parallax-section {
background-attachment: scroll; /* Disable parallax effect on mobile */
}
}
এটি মোবাইল ডিভাইসে parallax স্ক্রলিং বন্ধ করে দেয় এবং ব্যাকগ্রাউন্ড স্ক্রলিংকে সাধারণ করে তোলে, যাতে পারফরমেন্স সমস্যা না হয়।
সারাংশ
- Responsive Images:
srcsetএবংsizesঅ্যাট্রিবিউট ব্যবহার করে প্যারালাক্স স্ক্রলিং ইমেজের জন্য বিভিন্ন রেজোলিউশনের ছবি তৈরি করা যায়।<picture>ট্যাগ ব্যবহার করে ব্রাউজার স্বয়ংক্রিয়ভাবে সঠিক ইমেজ লোড করবে। - Media Queries: মোবাইল ডিভাইস এবং অন্যান্য স্ক্রীন সাইজের জন্য ওয়েব ডিজাইন কাস্টমাইজ করার জন্য media queries ব্যবহৃত হয়। এটি ওয়েবসাইটের পারফরমেন্স এবং ইউজার এক্সপিরিয়েন্স উন্নত করতে সাহায্য করে।
এভাবে আপনি প্যারালাক্স স্ক্রলিংয়ের সাথে responsive design এবং mobile optimization নিশ্চিত করতে পারবেন।
Read more
