প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ব্যবহার করতে হলে কিছু বিশেষ ফাইল এবং লাইব্রেরির প্রয়োজন হয়। এই লাইব্রেরি এবং ফাইলগুলি স্ক্রলিং ইফেক্ট তৈরির জন্য প্রয়োজনীয় কোড সরবরাহ করে এবং ওয়েবপেজের পারফরম্যান্স ও ইন্টারঅ্যাকশন উন্নত করে।
১. 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 Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax" id="parallax1">
<h1>Welcome to Parallax Scrolling</h1>
</div>
<div class="content">
<p>Scroll down to see the effect.</p>
</div>
<div class="parallax" id="parallax2">
<h1>Another Parallax Section</h1>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল
CSS (Cascading Style Sheets) ফাইলের মাধ্যমে প্যারালাক্স স্ক্রলিংয়ের জন্য উপযুক্ত স্টাইলস তৈরি করা হয়, যেমন ব্যাকগ্রাউন্ডে স্থির বা চলন্ত ছবি এবং স্ক্রলিং এফেক্টের জন্য প্রয়োজনীয় সিএসএস ক্লাস।
body {
font-family: Arial, sans-serif;
margin: 0;
}
.parallax {
height: 500px;
background: url('background.jpg') no-repeat center center fixed;
background-size: cover;
position: relative;
text-align: center;
color: white;
}
.content {
padding: 20px;
text-align: center;
background-color: #f4f4f4;
}
৩. JavaScript ফাইল
JavaScript ফাইলের মাধ্যমে স্ক্রলিংয়ের জন্য প্রয়োজনীয় গতির পার্থক্য তৈরি করা হয়, যা Parallax Scrolling ইফেক্টের ভিত্তি। এখানে কিছু বেসিক কোড দেওয়া হলো, যা প্যারালাক্স স্ক্রলিং ইফেক্ট সৃষ্টি করবে।
window.addEventListener('scroll', function() {
var scrolled = window.pageYOffset;
var parallax1 = document.getElementById('parallax1');
var parallax2 = document.getElementById('parallax2');
parallax1.style.backgroundPosition = 'center ' + (scrolled * 0.5) + 'px';
parallax2.style.backgroundPosition = 'center ' + (scrolled * 0.7) + 'px';
});
৪. jQuery লাইব্রেরি
যদি আপনি jQuery ব্যবহার করতে চান, তবে এটি একটি জনপ্রিয় JavaScript লাইব্রেরি, যা প্যারালাক্স স্ক্রলিং ইফেক্ট আরও সহজে তৈরি করতে সহায়তা করে। jQuery ব্যবহার করলে, আপনি কোডে সহজেই DOM (Document Object Model) ম্যানিপুলেশন করতে পারেন।
- jQuery ইনক্লুড করতে আপনাকে CDN বা লোকালি ফাইল ব্যবহার করতে হবে।
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
এবং jQuery ব্যবহার করে প্যারালাক্স স্ক্রলিংয়ের জন্য একটি উদাহরণ:
$(window).scroll(function() {
var scrolled = $(window).scrollTop();
$('#parallax1').css('background-position', 'center ' + (scrolled * 0.5) + 'px');
$('#parallax2').css('background-position', 'center ' + (scrolled * 0.7) + 'px');
});
৫. অন্যান্য লাইব্রেরি এবং প্লাগইন
- ScrollMagic: এটি একটি শক্তিশালী লাইব্রেরি যা আপনি স্ক্রলিং ইফেক্ট তৈরি করার জন্য ব্যবহার করতে পারেন। প্যারালাক্স স্ক্রলিং সহ আরও নানা ধরনের ইফেক্টের জন্য এটি খুবই জনপ্রিয়।
- Rellax.js: একটি হালকা JavaScript লাইব্রেরি, যা সহজভাবে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে সহায়তা করে। এটি ব্যবহার করা সহজ এবং পারফরম্যান্সও ভালো।
- Locomotive Scroll: এটি একটি অত্যন্ত জনপ্রিয় স্ক্রলিং লাইব্রেরি যা প্যারালাক্স স্ক্রলিংয়ের পাশাপাশি আরো অনেক উন্নত স্ক্রলিং ইফেক্ট প্রদান করে।
৬. প্রয়োজনীয় ফাইলের সংক্ষিপ্ত তালিকা
- HTML: সাইটের মূল কন্টেন্টের জন্য।
- CSS: প্যারালাক্স স্ক্রলিং স্টাইল এবং ডিজাইন।
- JavaScript/jQuery: স্ক্রলিংয়ের ইফেক্টের জন্য।
- ইমেজ বা ভিডিও: ব্যাকগ্রাউন্ডের জন্য।
- তৃতীয় পক্ষের লাইব্রেরি (যেমন ScrollMagic, Rellax.js, Locomotive Scroll): আরও উন্নত স্ক্রলিং ইফেক্টের জন্য।
প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে এই ফাইল এবং লাইব্রেরি ব্যবহারের মাধ্যমে আপনি ওয়েবপেজের ডিজাইনকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করে তুলতে পারেন।
Read more
