প্যারালাক্স স্ক্রলিং (Srallax Scrolling) একটি জনপ্রিয় ডিজাইন কৌশল যেখানে স্ক্রলিংয়ের সময় ব্যাকগ্রাউন্ড এবং কন্টেন্টের মধ্যে গতির পার্থক্য তৈরি করা হয়, যা একটি ত্রিমাত্রিক (3D) ইফেক্ট তৈরি করে। CSS Transform এবং Translate প্রপার্টি ব্যবহার করে এই ইফেক্টটি আরও আকর্ষণীয়ভাবে তৈরি করা যায়।
এখানে আমরা দেখবো কিভাবে CSS Transform এবং Translate ব্যবহার করে একটি সিম্পল প্যারালাক্স স্ক্রলিং তৈরি করা যায়।
Step-by-Step Guide: CSS Transform এবং Translate ব্যবহার করে 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>Parallax Scrolling with CSS Transform & Translate</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 Parallax effect using CSS Transform and Translate.</p>
</div>
</section>
<div class="normal-content">
<h2>Normal Content</h2>
<p>This section is normal content. Scroll down to see the parallax effect.</p>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS স্টাইলিং (styles.css)
এখন, CSS ফাইল তৈরি করতে হবে যেখানে transform এবং translate প্রপার্টি ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য প্রয়োজনীয় স্টাইলিং করা হবে।
/* 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-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
transform-origin: center center; /* Set transform origin */
transition: transform 0.1s ease-out;
}
.parallax .content {
z-index: 2;
text-align: center;
padding: 20px;
}
.normal-content {
background-color: #f4f4f4;
padding: 40px;
text-align: center;
}
.normal-content h2 {
margin-top: 0;
}
৩. JavaScript কোড (script.js)
এখন, JavaScript ব্যবহার করে স্ক্রল ইভেন্ট ট্র্যাক করা হবে এবং CSS Translate এবং Transform প্রপার্টি ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হবে।
window.addEventListener('scroll', function() {
var scrollPosition = window.scrollY; // Get the current scroll position
// Apply transform property to create the parallax effect
document.querySelector('.parallax').style.transform = 'translateY(' + scrollPosition * 0.5 + 'px)';
});
কোডের ব্যাখ্যা
- HTML:
.parallaxক্লাসের সেকশনটি ব্যাকগ্রাউন্ড ইমেজ সহ প্যারালাক্স স্ক্রলিং ইফেক্ট প্রদর্শন করবে।.normal-contentক্লাসের সেকশনটি সাধারণ কন্টেন্ট হিসেবে থাকবে, যা স্ক্রলিংয়ের পর দেখা যাবে।
- CSS:
.parallaxসেকশনেtransform-origin: center center;ব্যবহার করা হয়েছে, যাতে প্যারালাক্স ইফেক্টের সময় ইমেজের স্থানান্তর কেন্দ্র থেকে হয়।background-size: cover;এবংbackground-position: center;ব্যবহার করা হয়েছে, যাতে ব্যাকগ্রাউন্ড ইমেজ পুরো সেকশনে পূর্ণভাবে ফিট হয়।transition: transform 0.1s ease-out;প্যারালাক্স স্ক্রলিং ইফেক্টকে মসৃণ (smooth) করতে ব্যবহার করা হয়েছে।
- JavaScript:
window.scrollYএর মাধ্যমে স্ক্রল পজিশন ট্র্যাক করা হচ্ছে, এবং তারপরে.parallaxসেকশনেtransform: translateY()প্রপার্টি প্রয়োগ করা হচ্ছে।scrollPosition * 0.5ব্যাকগ্রাউন্ড ইমেজের গতিকে ধীর করে দেয়, যাতে প্যারালাক্স ইফেক্ট তৈরি হয়। আপনি এটি বাড়িয়ে বা কমিয়ে পরিবর্তন করতে পারেন।
কেন CSS Transform এবং Translate?
- CSS Transform এবং Translate প্রপার্টি প্যারালাক্স স্ক্রলিং ইফেক্টের জন্য একেবারে উপযুক্ত, কারণ এগুলি DOM (Document Object Model) এলিমেন্টকে স্থানান্তর এবং রোটেট করতে সাহায্য করে, এবং ওয়েবপেজের পারফরমেন্সে কোনও প্রভাব ফেলতে পারে না।
- Transform এবং Translate সহজে একত্রিত হয়ে গভীরতা এবং মুভমেন্টের অনুভূতি তৈরি করে, যা প্যারালাক্স স্ক্রলিংয়ের জন্য আদর্শ।
সারাংশ
CSS Transform এবং Translate ব্যবহার করে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা একটি সহজ এবং কার্যকরী পদ্ধতি। এটি ওয়েব ডিজাইনকে আরও আকর্ষণীয় ও ইন্টারঅ্যাকটিভ করে তোলে। স্ক্রল ইভেন্টের সাথে সাথে ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির পার্থক্য তৈরি হয়, যা গভীরতা এবং ভিজ্যুয়াল ইফেক্ট প্রদান করে।
Read more
