প্যারালাক্স স্ক্রলিং (Srallax Scrolling) ওয়েব ডিজাইনে একটি অত্যন্ত জনপ্রিয় ইফেক্ট, যা ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য সৃষ্টি করে। এটি একটি ত্রিমাত্রিক অনুভূতি তৈরি করে এবং ওয়েবপেজের স্ক্রলিং অভিজ্ঞতাকে আরও ডাইনামিক ও আকর্ষণীয় করে তোলে। jQuery প্লাগিন ব্যবহার করে এই ইফেক্ট সহজেই ওয়েবপেজে যোগ করা যায়।
এখানে আমরা জনপ্রিয় jQuery প্লাগিনগুলির সাহায্যে কিভাবে Srallax Scrolling ইফেক্ট তৈরি করা যায় তা দেখব।
jQuery প্লাগিন ব্যবহার করে Srallax Scrolling
১. Rellax.js প্লাগিন ব্যবহার করা
Rellax.js একটি হালকা, সহজ এবং দ্রুত কাজ করার মতো jQuery প্লাগিন, যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এটি ব্যাকগ্রাউন্ডে গভীরতা তৈরি করে এবং স্ক্রলিংয়ের সাথে উপাদানগুলোর গতির পার্থক্য সৃষ্টি করে।
ধাপ ১: Rellax.js প্লাগিন ইনস্টল করা
প্রথমে Rellax.js প্লাগিনটি ইনক্লুড করুন আপনার HTML ফাইলে। এটি CDN বা লোকালি ইনস্টল করা যেতে পারে।
<!-- Rellax.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>
ধাপ ২: 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" data-rellax-speed="5">
<h1>Welcome to Parallax Scrolling</h1>
</div>
<div class="content">
<p>Scroll down to see the effect.</p>
</div>
<div class="parallax" data-rellax-speed="3">
<h1>Another Parallax Section</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/rellax@1.12.1/rellax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: CSS কোড
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 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 কোড
এখন Rellax.js প্লাগিনটিকে ইনিশিয়ালাইজ করতে JavaScript কোড যোগ করুন।
// script.js
var rellax = new Rellax('.parallax');
এখানে, data-rellax-speed অ্যাট্রিবিউটের মাধ্যমে আপনি প্রতিটি প্যারালাক্স এলিমেন্টের গতির মান নির্ধারণ করতে পারেন। এর মান যত বেশি হবে, স্ক্রল করার সময় ব্যাকগ্রাউন্ড তত ধীরে চলবে।
২. Parallax.js প্লাগিন ব্যবহার করা
Parallax.js প্লাগিনটি আরও একটি জনপ্রিয় টুল যা প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য ব্যবহৃত হয়। এটি খুব সহজ এবং স্বয়ংক্রিয়ভাবে স্ক্রলিং ইফেক্ট প্রয়োগ করে।
ধাপ ১: Parallax.js প্লাগিন ইনস্টল করা
প্রথমে Parallax.js প্লাগিনটি ইনক্লুড করুন।
<!-- Parallax.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/parallax.js@3.1.0/parallax.min.js"></script>
ধাপ ২: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Example</title>
</head>
<body>
<div class="parallax-window" data-parallax="scroll" data-image-src="background.jpg">
<h1>Parallax Scrolling Effect</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/parallax.js@3.1.0/parallax.min.js"></script>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: JavaScript কোড
// script.js
var scene = document.getElementById('parallax-scene');
var parallax = new Parallax(scene);
এখানে, data-parallax="scroll" অ্যাট্রিবিউটের মাধ্যমে আপনি প্যারালাক্স স্ক্রলিং প্রভাবটি সক্রিয় করেন এবং data-image-src এর মাধ্যমে ব্যাকগ্রাউন্ড চিত্র নির্ধারণ করেন।
৩. ScrollMagic প্লাগিন ব্যবহার করা
ScrollMagic একটি শক্তিশালী লাইব্রেরি যা স্ক্রলিং ইভেন্টে কাস্টম অ্যানিমেশন এবং প্যারালাক্স স্ক্রলিং তৈরি করতে ব্যবহৃত হয়। এটি বিভিন্ন ইফেক্ট তৈরি করতে অনেক বেশি কাস্টমাইজযোগ্য।
ধাপ ১: ScrollMagic প্লাগিন ইনস্টল করা
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollmagic/2.0.7/plugins/animation.gsap.js"></script>
ধাপ ২: HTML কোড
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic Example</title>
</head>
<body>
<div class="parallax">
<h1>ScrollMagic Parallax Effect</h1>
</div>
<script src="script.js"></script>
</body>
</html>
ধাপ ৩: JavaScript কোড
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: ".parallax",
triggerHook: "onEnter",
duration: "100%"
})
.setTween(".parallax", {backgroundPosition: "center 100%", ease: Linear.easeNone})
.addTo(controller);
এই কোডের মাধ্যমে, প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হয়, এবং ScrollMagic লাইব্রেরি স্ক্রল ইভেন্টের সাথে ইফেক্টটির গতির পরিবর্তনকে ট্র্যাক করে।
সারাংশ
jQuery প্লাগিন ব্যবহারের মাধ্যমে প্যারালাক্স স্ক্রলিং সহজেই ওয়েবপেজে প্রয়োগ করা যায়। Rellax.js, Parallax.js, এবং ScrollMagic এর মতো প্লাগিনগুলি ওয়েব ডিজাইনে আকর্ষণীয় স্ক্রলিং ইফেক্ট তৈরি করতে সাহায্য করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে এবং ওয়েবসাইটকে আরও ইন্টারঅ্যাকটিভ করে তোলে।
Read more
