প্যারালাক্স স্ক্রলিং (Srallax Scrolling) হল একটি ওয়েব ডিজাইন কৌশল, যেখানে ব্যাকগ্রাউন্ড এবং কন্টেন্টের স্ক্রলিং গতি ভিন্ন ভিন্ন থাকে। এটি একটি অত্যন্ত জনপ্রিয় টেকনিক, যা ওয়েবসাইটের ডিজাইনকে আকর্ষণীয় এবং ডাইনামিক করে তোলে। CSS এর মাধ্যমে একটি সিম্পল ব্যাকগ্রাউন্ড প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ। এই টিউটোরিয়ালে, আমরা CSS এর সাহায্যে একটি বেসিক প্যারালাক্স ব্যাকগ্রাউন্ড তৈরি করব।
Step-by-Step Guide: CSS দিয়ে Simple Background Srallax তৈরি
১. HTML ফাইল
প্রথমে, HTML ফাইলে প্যারালাক্স স্ক্রলিং এর জন্য একটি সেকশন তৈরি করতে হবে, যেখানে ব্যাকগ্রাউন্ড ইমেজ থাকবে এবং স্ক্রলিং এর মাধ্যমে সেই ইমেজের গতির পার্থক্য তৈরি হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Parallax Scrolling</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<section class="parallax"></section>
<div class="content">
<h1>Scroll Down to See Parallax Effect</h1>
<p>Enjoy the beautiful effect!</p>
</div>
<section class="parallax"></section>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল (styles.css)
এখন, CSS ফাইলে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য প্রয়োজনীয় স্টাইলিং যুক্ত করতে হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
height: 2000px; /* Ensure enough scroll space */
}
/* Parallax Effect */
.parallax {
height: 100vh; /* 100% of the viewport height */
background-image: url('your-image.jpg'); /* Replace with your image */
background-attachment: fixed; /* Keeps the background fixed while scrolling */
background-size: cover; /* Makes sure the background covers the whole section */
background-position: center; /* Centers the background */
}
/* Content Section */
.content {
text-align: center;
padding: 50px;
background-color: #f4f4f4;
color: #333;
}
.content h1 {
font-size: 3em;
}
.content p {
font-size: 1.2em;
}
৩. JavaScript (script.js)
এই উদাহরণে, আমরা JavaScript ব্যবহার না করলেও, প্যারালাক্স স্ক্রলিং এর জন্য শুধুমাত্র CSS ব্যবহার করেই এই ইফেক্ট তৈরি করা সম্ভব। তবে, যদি আপনি আরো উন্নত স্ক্রলিং বা গতির নিয়ন্ত্রণ করতে চান, তখন JavaScript ব্যবহার করা যেতে পারে।
কোডের ব্যাখ্যা
- HTML:
- এখানে দুটি
.parallaxক্লাসের সেকশন রাখা হয়েছে, যেগুলির মধ্যে প্যারালাক্স স্ক্রলিং ইফেক্ট থাকবে। এছাড়া একটি.contentসেকশন রাখা হয়েছে, যা স্ক্রল করার সময় দৃশ্যমান হবে।
- এখানে দুটি
- CSS:
.parallaxসেকশনেbackground-attachment: fixedব্যবহার করা হয়েছে, যা স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড ইমেজকে স্থির (fixed) রাখবে। এর ফলে, ব্যাকগ্রাউন্ড ধীরে স্ক্রল হবে, কিন্তু কন্টেন্ট দ্রুত স্ক্রল করবে।background-size: coverএবংbackground-position: centerব্যাকগ্রাউন্ড ইমেজকে ওয়েবপেজের পুরো সেকশনের সাথে ফিট করে রাখবে এবং কেন্দ্রিভূত করবে।.contentসেকশনে সাধারণ টেক্সট এবং অন্যান্য কন্টেন্ট থাকে, যা স্ক্রল করার সময় দ্রুত গতিতে চলে।
ফলস্বরূপ
এই কোডটি ব্যবহার করে আপনি একটি সিম্পল প্যারালাক্স স্ক্রলিং ব্যাকগ্রাউন্ড তৈরি করতে পারবেন। আপনি যে ছবিটি ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করতে চান, সেটি background-image প্রপার্টিতে দিয়ে দিতে হবে। এই ইফেক্টের মাধ্যমে, যখন আপনি পেজ স্ক্রল করবেন, তখন ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য স্পষ্টভাবে দেখা যাবে।
সারাংশ
CSS এর মাধ্যমে প্যারালাক্স স্ক্রলিং তৈরি করা খুবই সহজ এবং এটি ওয়েব ডিজাইনে একটি অত্যন্ত আকর্ষণীয় ইফেক্ট প্রদান করে। এই টিউটোরিয়ালে, আমরা ব্যাকগ্রাউন্ডে প্যারালাক্স স্ক্রলিং ইফেক্ট যোগ করার জন্য CSS ব্যবহার করেছি। আপনি এই কোডটি আপনার ওয়েবসাইটে প্রয়োগ করে এটি দেখতে পারেন।
Read more
