প্যারালাক্স স্ক্রলিং বা Srallax Scrolling ওয়েব ডিজাইনে গভীরতা এবং গতির পার্থক্য তৈরি করতে ব্যবহৃত হয়। এখানে একটি সিম্পল প্যারালাক্স স্ক্রলিং এর উদাহরণ দেওয়া হলো, যা আপনি আপনার ওয়েবসাইটে সহজে প্রয়োগ করতে পারেন। এই উদাহরণটি CSS এবং JavaScript ব্যবহার করে তৈরি করা হবে।
উদাহরণ: Simple Srallax Effect
এই উদাহরণে, আমরা একটি ওয়েবপেজে দুটি স্তর (layer) তৈরি করবো। একটি ব্যাকগ্রাউন্ড লেয়ার এবং একটি ফ্রন্ট কন্টেন্ট লেয়ার থাকবে, যেখানে ব্যাকগ্রাউন্ড লেয়ারটি ধীরে স্ক্রল হবে এবং কন্টেন্ট লেয়ারটি দ্রুত স্ক্রল করবে।
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Srallax Effect</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Welcome to Parallax Scrolling!</h1>
<p>This is a simple example of a parallax effect.</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
margin: 0;
font-family: Arial, sans-serif;
}
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
}
.parallax-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('https://via.placeholder.com/1920x1080');
background-size: cover;
background-position: center;
z-index: -1;
}
.content {
position: relative;
text-align: center;
color: white;
padding: 50px;
}
h1 {
font-size: 3em;
}
p {
font-size: 1.5em;
margin-top: 20px;
}
JavaScript (script.js)
window.addEventListener('scroll', function() {
let background = document.querySelector('.parallax-background');
let offset = window.pageYOffset;
background.style.backgroundPosition = 'center ' + (offset * 0.5) + 'px';
});
ব্যাখ্যা:
- HTML: এই অংশে, একটি
divকন্টেইনার তৈরি করা হয়েছে যা প্যারালাক্স ইফেক্ট ধারণ করবে। এর মধ্যে রয়েছে একটি ব্যাকগ্রাউন্ডdivএবং কন্টেন্টের জন্য একটিdiv। - CSS: এখানে ব্যাকগ্রাউন্ড ইমেজের আকার ও অবস্থান নির্ধারণ করা হয়েছে এবং কন্টেন্টের জন্য স্টাইলিং করা হয়েছে।
- JavaScript: স্ক্রলিং ইভেন্ট ট্র্যাক করা হচ্ছে। যখন পেজ স্ক্রল হবে, তখন backgroundPosition পরিবর্তিত হবে, যা ব্যাকগ্রাউন্ড ইমেজটিকে ধীরে স্ক্রল করার ইফেক্ট তৈরি করবে। স্ক্রলিংয়ের গতির ওপর ভিত্তি করে,
offset * 0.5মানটি ব্যাকগ্রাউন্ডের গতির জন্য নির্ধারণ করা হয়।
ফলাফল:
এই কোডটির মাধ্যমে একটি সিম্পল প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা হবে, যেখানে ব্যাকগ্রাউন্ড ধীরে ধীরে স্ক্রল হবে এবং কন্টেন্ট দ্রুত স্ক্রল হবে। এটি ওয়েব ডিজাইনে একটি আকর্ষণীয় ও ইন্টারঅ্যাকটিভ উপস্থাপনা তৈরি করবে।
এই উদাহরণটি সহজ এবং সরল, তবে আপনি এর মধ্যে আরও কাস্টমাইজেশন যেমন অতিরিক্ত অ্যানিমেশন, ভিন্ন ভিন্ন লেয়ারস, বা ফিক্সড উপাদান যোগ করে এটি আরও ডাইনামিক করতে পারেন।
Read more
