Srallax Scrolling (বা Parallax Scrolling) ইফেক্ট ওয়েব ডিজাইনে আকর্ষণীয় এবং ডাইনামিক উপস্থাপনা তৈরি করতে ব্যবহৃত হয়। jQuery লাইব্রেরি ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট আরও সহজ এবং কার্যকরী করা যেতে পারে। এখানে আমরা দেখবো কিভাবে jQuery লাইব্রেরি ইন্টিগ্রেট করে একটি সিম্পল প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা যায়।
jQuery লাইব্রেরি ইন্টিগ্রেশন
যেহেতু jQuery এক ধরনের JavaScript লাইব্রেরি, এটি ওয়েবপেজের ইন্টারঅ্যাকশন এবং ডাইনামিক কন্টেন্টের জন্য সহজে কাজ করে। jQuery ব্যবহার করে প্যারালাক্স স্ক্রলিং খুবই সহজ এবং দ্রুত করা যায়।
Srallax Scrolling এর জন্য jQuery কোড
এখানে একটি উদাহরণ দেয়া হলো, যেখানে jQuery ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হয়েছে।
১. 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 jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<section class="parallax">
<div class="content">
<h1>Welcome to Parallax Scrolling!</h1>
<p>This is an example of Srallax (Parallax) scrolling effect using jQuery.</p>
</div>
</section>
<section class="normal-content">
<h2>Normal Content</h2>
<p>This section is normal content. Scroll down to see the parallax effect.</p>
</section>
<script src="script.js"></script>
</body>
</html>
২. CSS কোড (styles.css)
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Parallax Section */
.parallax {
position: relative;
height: 100vh; /* 100% of viewport height */
background-image: url('your-image.jpg'); /* Add your background image */
background-attachment: fixed;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
}
.parallax .content {
z-index: 2;
}
.normal-content {
background-color: #f4f4f4;
padding: 40px;
text-align: center;
}
৩. jQuery কোড (script.js)
$(document).ready(function() {
// When the user scrolls
$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
// Adjust the background position to create the parallax effect
$('.parallax').css('background-position', 'center ' + (scrollPosition * 0.5) + 'px');
});
});
কোডের ব্যাখ্যা
- HTML:
- একটি
parallaxক্লাসের সেকশন তৈরি করা হয়েছে, যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট দেখানো হবে। normal-contentক্লাসের সেকশনটি সাধারণ কন্টেন্ট হিসেবে যোগ করা হয়েছে, যাতে প্যারালাক্স স্ক্রলিং এর প্রভাব স্পষ্টভাবে দেখা যায়।
- একটি
- CSS:
.parallaxক্লাসেbackground-attachment: fixed;ব্যবহার করা হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিংয়ের সময় স্থির রাখবে।background-position: center;এবংbackground-size: cover;ব্যাকগ্রাউন্ডের সঠিক সাইজ এবং পজিশন নিয়ন্ত্রণ করবে।height: 100vh;ব্যবহার করা হয়েছে, যাতে ব্যাকগ্রাউন্ড পুরো viewport এর উচ্চতা নিতে পারে এবং স্ক্রলিংয়ের সময় প্রভাবটি স্পষ্টভাবে দেখা যায়।
- jQuery:
$(window).scroll()ফাংশন স্ক্রল ইভেন্ট ট্র্যাক করবে। স্ক্রল পজিশনের উপর ভিত্তি করে.parallaxক্লাসের ব্যাকগ্রাউন্ড পজিশন পরিবর্তন করা হয়, যাতে স্ক্রলিংয়ের সময় প্যারালাক্স ইফেক্ট তৈরি হয়।scrollPosition * 0.5ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি করবে। এটি ব্যাকগ্রাউন্ডের গতিকে কমিয়ে ধীর করে দেয়, যার ফলে প্যারালাক্স ইফেক্টটি তৈরি হয়।
উপসংহার
এই কোডের মাধ্যমে আপনি jQuery ব্যবহার করে সহজে প্যারালাক্স স্ক্রলিং ইফেক্ট ওয়েবসাইটে যোগ করতে পারেন। jQuery লাইব্রেরি ওয়েব ডিজাইনকে সহজ এবং কার্যকরী করতে সহায়তা করে, এবং এটি স্ক্রলিং ইভেন্ট এবং বিভিন্ন ভিজ্যুয়াল ইফেক্টের জন্য খুবই জনপ্রিয় একটি টুল।
Read more
