প্যারালাক্স স্ক্রলিং (Srallax Scrolling) HTML ফাইলের মধ্যে একটি আকর্ষণীয় এবং ডাইনামিক স্ক্রলিং ইফেক্ট যোগ করার জন্য ব্যবহৃত হয়, যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্টের স্ক্রলিং গতি ভিন্ন ভিন্ন থাকে। এটি সাধারণত CSS এবং JavaScript ব্যবহার করে ওয়েব পেজে প্রয়োগ করা হয়।
Srallax Scrolling এর জন্য প্রয়োজনীয় ফাইল
Srallax Scrolling যোগ করতে তিনটি মূল উপাদান প্রয়োজন:
- HTML (যেখানে ওয়েব পেজের কন্টেন্ট থাকবে)
- CSS (যে স্টাইলিং দিয়ে ব্যাকগ্রাউন্ডের গতির পার্থক্য সৃষ্টি হবে)
- JavaScript (যে স্ক্রল ইফেক্টটি নিয়ন্ত্রণ করবে)
HTML ফাইলের মধ্যে Srallax Scrolling যোগ করার প্রক্রিয়া
এখানে একটি সাধারণ উদাহরণ দেয়া হলো যেভাবে আপনি HTML ফাইলে Srallax Scrolling যোগ করতে পারেন।
১. 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>
<!-- Parallax Section -->
<section class="parallax">
<div class="content">
<h1>Welcome to Parallax Scrolling!</h1>
<p>This is an example of Srallax (Parallax) scrolling effect.</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>
<!-- Add more sections as required -->
<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;
}
.parallax .content {
color: white;
z-index: 2;
}
.normal-content {
background-color: #f4f4f4;
padding: 40px;
text-align: center;
}
৩. JavaScript কোড (script.js)
// Add an event listener for scroll events to handle the parallax effect
window.addEventListener('scroll', function() {
var parallax = document.querySelector('.parallax');
var scrollPosition = window.pageYOffset;
// Modify the background position to create the parallax effect
parallax.style.backgroundPosition = 'center ' + (scrollPosition * 0.5) + 'px';
});
কোডের ব্যাখ্যা
- HTML: এখানে একটি
<section>ক্লাসparallaxনামে তৈরি করা হয়েছে, যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট প্রদর্শিত হবে। এছাড়া একটি সাধারণ সেকশনnormal-contentযোগ করা হয়েছে যাতে আপনি প্যারালাক্স স্ক্রলিং এর প্রভাব দেখার জন্য স্ক্রল করতে পারেন। - CSS:
.parallaxক্লাসেbackground-attachment: fixedব্যবহার করা হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিং এর সময় স্থির রাখবে।background-position: centerএবংbackground-size: coverদিয়ে ব্যাকগ্রাউন্ড ইমেজের সাইজ এবং পজিশন ঠিক করা হয়েছে।height: 100vhব্যাকগ্রাউন্ডের উচ্চতা পুরো viewport এর সমান করে দেয়, যাতে স্ক্রলিং এর সময় প্যারালাক্স ইফেক্ট পূর্ণভাবে প্রদর্শিত হয়।
- JavaScript: এখানে স্ক্রল ইভেন্টের জন্য একটি ফাংশন যোগ করা হয়েছে, যা স্ক্রল করার সময় ব্যাকগ্রাউন্ডের অবস্থান পরিবর্তন করে।
scrollPosition * 0.5দিয়ে ব্যাকগ্রাউন্ডের গতি নিয়ন্ত্রণ করা হয়, যা প্যারালাক্স ইফেক্টের জন্য গুরুত্বপূর্ণ।
উপসংহার
এই কোডটি ব্যবহার করে আপনি সহজেই HTML ফাইলের মধ্যে Srallax Scrolling (Parallax Scrolling) ইফেক্ট যোগ করতে পারবেন। আপনি আপনার ইচ্ছেমত ব্যাকগ্রাউন্ড চিত্র এবং কন্টেন্ট পরিবর্তন করতে পারেন। তবে, মনে রাখবেন অতিরিক্ত গ্রাফিক্স বা অ্যানিমেশন ব্যবহারে পারফরমেন্সের সমস্যা হতে পারে, বিশেষত মোবাইল ডিভাইসে।
Content added By
Read more
