প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি অত্যন্ত জনপ্রিয় ওয়েব ডিজাইন টেকনিক, যা স্ক্রলিংয়ের মাধ্যমে ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করে। আপনি CSS এবং JavaScript ব্যবহার করে কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে পারেন, যেখানে আপনি বিভিন্ন লেয়ারের গতির পার্থক্য তৈরি করতে পারবেন এবং স্ক্রলিংয়ের অভিজ্ঞতাকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারবেন।
এই টিউটোরিয়ালে, আমরা দেখব কিভাবে CSS এবং JavaScript ব্যবহার করে একটি কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করা যায়।
কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করার জন্য প্রয়োজনীয় উপাদান
- HTML স্ট্রাকচার: ওয়েবপেজের বিভিন্ন অংশ তৈরি করা হবে, যেমন প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশন।
- CSS স্টাইলিং: প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশন স্টাইল করা হবে।
- JavaScript: স্ক্রল ইভেন্ট ট্র্যাক করতে এবং কাস্টম স্ক্রলিং প্রভাব তৈরি করতে JavaScript ব্যবহার করা হবে।
১. HTML স্ট্রাকচার
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<div class="parallax-layer" id="parallax-layer-1"></div>
<!-- Content Section -->
<div class="content">
<h1>Welcome to My Custom Parallax Website</h1>
<p>This is an example of custom parallax scrolling using CSS and JavaScript.</p>
</div>
<!-- Another Parallax Layer -->
<div class="parallax-layer" id="parallax-layer-2"></div>
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং
এখন, প্যারালাক্স লেয়ার এবং কন্টেন্ট সেকশনগুলোর জন্য কিছু বেসিক CSS স্টাইলিং করতে হবে। এখানে, আমরা ব্যাকগ্রাউন্ড ইমেজ যোগ করব এবং স্ক্রলিংয়ের সময় লেয়ারগুলির গতির পার্থক্য তৈরি করব।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
height: 2000px; /* Set a tall height for scrolling */
}
/* Parallax Layer Styling */
.parallax-layer {
position: fixed;
width: 100%;
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -1; /* Ensure layers stay behind content */
}
/* First Parallax Layer (Background) */
#parallax-layer-1 {
background-image: url('https://via.placeholder.com/1920x1080?text=Layer+1');
}
/* Second Parallax Layer */
#parallax-layer-2 {
background-image: url('https://via.placeholder.com/1920x1080?text=Layer+2');
}
/* Content Section */
.content {
position: relative;
text-align: center;
padding: 50px;
background-color: rgba(255, 255, 255, 0.8);
color: #333;
z-index: 1;
}
.content h1 {
font-size: 3rem;
}
.content p {
font-size: 1.5rem;
}
৩. JavaScript ব্যবহার করা
এখন, আমরা JavaScript ব্যবহার করে প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করব। আমরা স্ক্রল ইভেন্ট ট্র্যাক করে প্রতিটি লেয়ারের গতির পার্থক্য তৈরি করব।
JavaScript কোড:
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY; // Get the current scroll position
// Apply parallax effect to the first layer (move slower)
var layer1 = document.getElementById('parallax-layer-1');
layer1.style.transform = 'translateY(' + scrollPosition * 0.3 + 'px)'; // Slow movement
// Apply parallax effect to the second layer (move faster)
var layer2 = document.getElementById('parallax-layer-2');
layer2.style.transform = 'translateY(' + scrollPosition * 0.6 + 'px)'; // Faster movement
});
কোড ব্যাখ্যা:
- scrollY:
scrollYব্যবহার করে স্ক্রল পজিশন ট্র্যাক করা হচ্ছে, যাতে স্ক্রলিংয়ের সময় প্যারালাক্স লেয়ারগুলির গতির পার্থক্য তৈরি করা যায়। translateY():translateY()ব্যবহার করে, আমরা প্যারালাক্স লেয়ারগুলির অবস্থান পরিবর্তন করছি। এখানে, Layer 1 ধীরে (0.3 গুণ স্ক্রল পজিশন) এবং Layer 2 দ্রুত (0.6 গুণ স্ক্রল পজিশন) স্ক্রল হবে।transform:transformপ্রপার্টি দিয়ে লেয়ারগুলির স্থান পরিবর্তন করা হচ্ছে, যাতে পারফরম্যান্সে কোন প্রভাব না পড়ে। এটি GPU-accelerated রেন্ডারিং নিশ্চিত করে।
৪. Responsive Design নিশ্চিত করা
এখন, আমরা মিডিয়া কুয়েরি ব্যবহার করে নিশ্চিত করব যে প্যারালাক্স স্ক্রলিং মোবাইল এবং ট্যাবলেট ডিভাইসে সঠিকভাবে কাজ করছে।
/* Disable Parallax on Mobile Devices */
@media only screen and (max-width: 768px) {
#parallax-layer-1, #parallax-layer-2 {
background-attachment: scroll; /* Disable parallax effect on small screens */
}
}
এই মিডিয়া কুয়েরি মোবাইল ডিভাইসে প্যারালাক্স স্ক্রলিং বন্ধ করবে, যাতে মোবাইল ডিভাইসে পারফরম্যান্স সমস্যা না হয় এবং স্ক্রলিং সঠিকভাবে কাজ করে।
সারাংশ
কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে CSS এবং JavaScript ব্যবহার করা যেতে পারে। আমরা এখানে দুটি লেয়ার তৈরি করেছি, যেখানে একটির গতি কম এবং আরেকটির গতি বেশি, স্ক্রল পজিশনের উপর ভিত্তি করে। JavaScript ব্যবহার করে স্ক্রল ইভেন্ট ট্র্যাক করার মাধ্যমে আমরা প্যারালাক্স প্রভাব সৃষ্টি করেছি। এছাড়া, media queries ব্যবহার করে মোবাইল ডিভাইসে স্ক্রলিং বন্ধ করার ব্যবস্থা রাখা হয়েছে, যাতে পারফরম্যান্স উন্নত হয়।
এভাবে, আপনি CSS এবং JavaScript এর সাহায্যে কাস্টম প্যারালাক্স স্ক্রলিং তৈরি করতে পারেন এবং এটি বিভিন্ন ডিভাইসে সমানভাবে সঠিকভাবে কাজ করবে।
Read more
