প্যারালাক্স স্ক্রলিং একটি ওয়েব ডিজাইন টেকনিক, যেখানে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড ইমেজ এবং কন্টেন্ট আলাদা গতিতে স্ক্রল হয়। এই ইফেক্টটি একটি ত্রিমাত্রিক (3D) অনুভূতি তৈরি করে, যা ওয়েব পেজকে আরও ডাইনামিক এবং ইন্টারঅ্যাকটিভ করে তোলে। JavaScript এর মাধ্যমে এই ইফেক্ট তৈরি করা বেশ সহজ এবং এটি আপনার পেজে আকর্ষণীয় ভিজ্যুয়াল ইফেক্ট যোগ করতে সাহায্য করে।
JavaScript দিয়ে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট তৈরি
JavaScript ব্যবহার করে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট কনফিগার করা হয় স্ক্রল ইভেন্টের মাধ্যমে। এই ইফেক্টটি স্ক্রল করার সময় ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে, ফলে ইমেজ ধীরে স্ক্রল হয় অন্য কন্টেন্টের তুলনায়।
১. HTML স্ট্রাকচার
প্রথমে আপনার HTML ফাইলের ভিতর একটি সাধারণ স্ট্রাকচার তৈরি করুন যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট দেখানো হবে।
<!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 JavaScript</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax"></div> <!-- Parallax Section with Background -->
<div class="content">
<h1>Welcome to Parallax Scrolling</h1>
<p>Scroll down to see the effect</p>
</div>
<div class="parallax"></div> <!-- Another Parallax Section -->
<script src="script.js"></script> <!-- JavaScript File -->
</body>
</html>
২. CSS স্টাইলিং
এখন আমরা CSS দিয়ে আমাদের ওয়েব পেজের ডিজাইন তৈরি করব, যাতে ব্যাকগ্রাউন্ড ইমেজ সঠিকভাবে প্রদর্শিত হয় এবং প্যারালাক্স ইফেক্ট পরিষ্কারভাবে দেখা যায়।
/* styles.css */
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
position: relative;
background-image: url('your-image.jpg'); /* Replace with your background image */
height: 100vh; /* Full height of the viewport */
background-attachment: fixed; /* Keeps the background fixed while scrolling */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.content {
text-align: center;
padding: 20px;
background-color: white;
}
৩. JavaScript দিয়ে ব্যাকগ্রাউন্ড ইমেজের মুভমেন্ট
এখন আসল কাজটি হল JavaScript দিয়ে ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করা যখন ব্যবহারকারী স্ক্রল করে। নিচে একটি সহজ উদাহরণ দেওয়া হল:
// script.js
window.addEventListener('scroll', function() {
var scrollPosition = window.pageYOffset; // Get the current scroll position
var parallax = document.querySelector('.parallax'); // Select the parallax element
// Change the background position based on the scroll position
parallax.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
});
ব্যাখ্যা:
- window.addEventListener('scroll', function() {...}): এই লাইনটি স্ক্রল ইভেন্টটি শোনে। যখনই ব্যবহারকারী স্ক্রল করবে, এই ফাংশনটি ট্রিগার হবে।
- window.pageYOffset: এটি স্ক্রল পজিশন (স্ক্রলিং এর দূরত্ব) বের করতে ব্যবহৃত হয়।
- parallax.style.backgroundPosition: এটি ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে।
scrollPosition * 0.5মানে হল, ব্যাকগ্রাউন্ড ইমেজের গতি কন্টেন্টের তুলনায় ধীরে হবে।
৪. প্রভাব
এই কোডটি ব্যবহার করার পর, আপনি দেখতে পাবেন যে ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করার সময় ধীরে ধীরে চলে এবং এটি কন্টেন্টের তুলনায় আলাদা গতিতে স্ক্রল হয়। এর ফলে একটি প্যারালাক্স ইফেক্ট তৈরি হয় যা ওয়েবসাইটের ডিজাইনকে আরও ডাইনামিক এবং আকর্ষণীয় করে তোলে।
৫. অতিরিক্ত কাস্টমাইজেশন
- বিভিন্ন সেকশনে বিভিন্ন গতির প্যারালাক্স: আপনি যদি বিভিন্ন সেকশনে ভিন্ন গতির প্যারালাক্স ইফেক্ট চান, তাহলে আপনি প্রতি
.parallaxক্লাসের জন্য আলাদা আলাদা স্ক্রল গতি নির্ধারণ করতে পারেন।
var parallax1 = document.querySelector('#parallax1');
parallax1.style.backgroundPosition = 'center ' + (scrollPosition * 0.3) + 'px';
var parallax2 = document.querySelector('#parallax2');
parallax2.style.backgroundPosition = 'center ' + (scrollPosition * 0.7) + 'px';
- গ্রাফিক্স অপটিমাইজেশন: প্যারালাক্স স্ক্রলিং ইফেক্ট ব্যবহারের সময় ব্যাকগ্রাউন্ড ইমেজের সাইজ এবং কোয়ালিটি উপযুক্ত হতে হবে। উচ্চ রেজোলিউশনের ইমেজ ব্যবহার করা ভাল, তবে এটি ওয়েব পেজের লোডিং স্পিডে প্রভাব ফেলতে পারে।
সারাংশ
JavaScript দিয়ে প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ এবং ডাইনামিক ইফেক্ট প্রদান করে। স্ক্রল ইভেন্ট ট্র্যাক করে ব্যাকগ্রাউন্ডের পজিশন পরিবর্তন করে এই ইফেক্ট সৃষ্টি করা হয়, যা ওয়েব পেজকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তোলে। আপনি আপনার ওয়েব পেজের ডিজাইন এবং কনটেন্টের সাথে এই স্ক্রলিং ইফেক্টটি কাস্টমাইজ করতে পারেন, যাতে এটি আরও সুবিধাজনক ও দৃষ্টিনন্দন হয়।
Read more
