প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েব ডিজাইনে একটি জনপ্রিয় কৌশল, যা স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করে গভীরতা এবং ত্রিমাত্রিক (3D) প্রভাব সৃষ্টি করে। তবে, ওয়েবসাইটের responsive design নিশ্চিত করা প্রয়োজন, যাতে বিভিন্ন ডিভাইসে সঠিকভাবে প্রদর্শিত হয়। এই উদ্দেশ্যে, media queries ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট এবং ডিজাইন কাস্টমাইজ করা সম্ভব।
এই টিউটোরিয়ালে আমরা দেখবো কিভাবে media queries ব্যবহার করে প্যারালাক্স স্ক্রলিংয়ের জন্য ওয়েবসাইটের ডিজাইন এবং পারফরম্যান্স বিভিন্ন ডিভাইসের স্ক্রীনে উপযুক্ত করা যায়।
Media Queries কি?
Media Queries একটি CSS প্রযুক্তি যা বিভিন্ন ডিভাইসের স্ক্রীন সাইজ, রেজোলিউশন এবং অন্যান্য বৈশিষ্ট্য অনুসারে ওয়েব ডিজাইন কাস্টমাইজ করতে সাহায্য করে। এটি সাইটের রেসপন্সিভনেস নিশ্চিত করতে ব্যবহৃত হয়।
Srallax Scrolling এর জন্য Media Queries ব্যবহার
প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনের জন্য media queries ব্যবহার করলে, বিভিন্ন ডিভাইসে স্ক্রলিং ইফেক্ট এবং অন্যান্য উপাদান কাস্টমাইজ করা সম্ভব হয়। বিশেষ করে মোবাইল এবং ট্যাবলেটের মতো ছোট স্ক্রীনগুলোতে, প্যারালাক্স স্ক্রলিং সঠিকভাবে কাজ নাও করতে পারে। সেক্ষেত্রে, মিডিয়া কুয়েরির মাধ্যমে মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করা এবং বড় স্ক্রীনে এর কার্যকারিতা নিশ্চিত করা যায়।
Step 1: HTML Structure for Parallax
প্রথমে, একটি সাধারণ প্যারালাক্স স্ক্রলিং স্ট্রাকচার তৈরি করুন:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling with Media Queries</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="parallax" id="parallax-background"></section>
<div class="content">
<h1>Responsive Parallax Scrolling</h1>
<p>This is a parallax scrolling effect with media queries.</p>
</div>
<section class="parallax" id="parallax-background-2"></section>
<script src="script.js"></script>
</body>
</html>
Step 2: CSS for Parallax Scrolling
CSS এ প্যারালাক্স ইফেক্টের জন্য বিভিন্ন সেকশন তৈরি করুন এবং স্টাইল করুন। এর মধ্যে background-attachment এবং transform প্রপার্টি ব্যবহার করা হবে। এছাড়া, মিডিয়া কুয়েরি ব্যবহার করে মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং নিষ্ক্রিয় করা হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Parallax Sections */
.parallax {
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
}
/* Parallax Background Images */
#parallax-background {
background-image: url('background-large.jpg');
background-attachment: fixed;
}
#parallax-background-2 {
background-image: url('background-large-2.jpg');
background-attachment: fixed;
}
/* Content Section */
.content {
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
z-index: 1;
position: relative;
}
.content h1 {
font-size: 3rem;
}
.content p {
font-size: 1.5rem;
}
/* Media Queries for Responsiveness */
@media only screen and (max-width: 1024px) {
/* For Tablets */
#parallax-background, #parallax-background-2 {
background-attachment: scroll; /* Disable parallax effect on tablets */
}
}
@media only screen and (max-width: 600px) {
/* For Mobile */
#parallax-background, #parallax-background-2 {
background-attachment: scroll; /* Disable parallax effect on mobile */
}
.content h1 {
font-size: 2rem;
}
.content p {
font-size: 1.2rem;
}
}
Step 3: JavaScript for Parallax (Optional)
যদি আপনি আরো কাস্টম প্যারালাক্স ইফেক্ট চান, তবে JavaScript ব্যবহার করে স্ক্রল পজিশন ট্র্যাক করে ব্যাকগ্রাউন্ড লেয়ারগুলোতে movement দিতে পারেন।
// JavaScript for Parallax Effect (Optional)
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY;
var parallaxBackground = document.getElementById('parallax-background');
var parallaxBackground2 = document.getElementById('parallax-background-2');
// Apply Parallax Scrolling Effect
parallaxBackground.style.transform = 'translateY(' + (scrollPosition * 0.5) + 'px)';
parallaxBackground2.style.transform = 'translateY(' + (scrollPosition * 0.3) + 'px)';
});
Step 4: Media Queries for Mobile Optimization
মোবাইল এবং ট্যাবলেট স্ক্রীনে প্যারালাক্স স্ক্রলিং কিছুটা স্লো বা সমন্বিত হতে পারে। তাই, মিডিয়া কুয়েরির মাধ্যমে ছোট স্ক্রীনে প্যারালাক্স স্ক্রলিং বন্ধ করে দেওয়া হয় এবং সাধারণ ব্যাকগ্রাউন্ড স্ক্রলিং চালু করা হয়।
/* For Tablets and Mobile Devices */
@media only screen and (max-width: 1024px) {
/* Disable parallax effect on tablets */
#parallax-background, #parallax-background-2 {
background-attachment: scroll;
}
}
@media only screen and (max-width: 600px) {
/* Disable parallax effect on mobile */
#parallax-background, #parallax-background-2 {
background-attachment: scroll;
}
}
Conclusion
এইভাবে, media queries ব্যবহার করে আপনি প্যারালাক্স স্ক্রলিংয়ের ইফেক্টগুলো বিভিন্ন স্ক্রীন সাইজের জন্য কাস্টমাইজ করতে পারেন। মোবাইল এবং ট্যাবলেটের জন্য প্যারালাক্স স্ক্রলিং বন্ধ করে দেয়ার মাধ্যমে ওয়েবসাইটের পারফরম্যান্স উন্নত হয় এবং ইউজার এক্সপিরিয়েন্স আরও ভালো হয়। বড় স্ক্রীনে এই ইফেক্ট চালু রেখে ছোট স্ক্রীনে সাধারণ স্ক্রলিং ব্যবহার করা একটি জনপ্রিয় এবং কার্যকরী পদ্ধতি।
Read more
