প্যারালাক্স স্ক্রলিং একটি অত্যন্ত জনপ্রিয় ওয়েব ডিজাইন টেকনিক, যা ওয়েবপেজের বিভিন্ন উপাদানকে স্ক্রলিংয়ের সময় ভিন্ন গতিতে চলতে দেয়। সাধারণত ব্যাকগ্রাউন্ডে ইমেজ ব্যবহার করা হয়, তবে ভিডিও এবং animated GIF ব্যবহার করেও প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করা সম্ভব। এটি আরও ডাইনামিক এবং আকর্ষণীয় ডিজাইন তৈরি করতে সাহায্য করে। এখানে আমরা দেখব কীভাবে ভিডিও এবং animated GIF ব্যবহার করে parallax effect তৈরি করা যায়।
ভিডিও এবং Animated GIF দিয়ে Parallax Effect তৈরি করার পদক্ষেপ
- HTML স্ট্রাকচার তৈরি করা
প্রথমে HTML এ ভিডিও এবং GIF ফাইলের জন্য উপযুক্ত স্ট্রাকচার তৈরি করতে হবে, যাতে তাদের মধ্যে প্যারালাক্স প্রভাব তৈরি করা যায়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Effect with Video and GIF</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Video Background -->
<div class="parallax parallax-video">
<video autoplay loop muted>
<source src="your-video.mp4" type="video/mp4">
</video>
</div>
<div class="content">
<h1>Parallax with Video Background</h1>
<p>Enjoy this smooth parallax effect created using video and GIFs.</p>
</div>
<!-- Parallax GIF Background -->
<div class="parallax parallax-gif">
<img src="your-animated.gif" alt="Parallax GIF">
</div>
<div class="content">
<h1>Parallax with Animated GIF</h1>
<p>This is an example of parallax scrolling with an animated GIF.</p>
</div>
<script src="script.js"></script>
</body>
</html>
- CSS কোড লেখা
CSS এর মাধ্যমে ভিডিও এবং GIF এর জন্য প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করতে হবে। এটি ব্যাকগ্রাউন্ডের স্ক্রলিং গতিকে নিয়ন্ত্রণ করবে এবং ভিডিও/GIF এর জন্য ফিক্সড পজিশন তৈরি করবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body Styling */
body {
font-family: Arial, sans-serif;
overflow-x: hidden;
}
/* Parallax Video Styling */
.parallax-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
background-size: cover;
}
.parallax-video video {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: cover;
}
/* Parallax GIF Styling */
.parallax-gif {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
background-size: cover;
}
.parallax-gif img {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100%;
object-fit: cover;
}
/* Content Section */
.content {
position: relative;
text-align: center;
padding: 50px;
background-color: rgba(255, 255, 255, 0.7);
color: #333;
z-index: 1;
}
.content h1 {
font-size: 3rem;
}
.content p {
font-size: 1.5rem;
}
- JavaScript কোড (scroll event)
প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করতে JavaScript দিয়ে স্ক্রল ইভেন্ট ট্র্যাক করা হবে এবং ভিডিও বা GIF এর পজিশন আপডেট করা হবে।
// Function to handle parallax effect on scroll
function handleParallax() {
const scrollPosition = window.scrollY;
// Apply parallax effect on video background
const video = document.querySelector('.parallax-video video');
video.style.transform = `translateY(${scrollPosition * 0.5}px)`; // Slow down the video
// Apply parallax effect on GIF background
const gif = document.querySelector('.parallax-gif img');
gif.style.transform = `translateY(${scrollPosition * 0.8}px)`; // Slightly faster GIF effect
}
// Event listener for scroll
window.addEventListener('scroll', handleParallax);
কোড ব্যাখ্যা
- HTML:
.parallax-videoএবং.parallax-gifক্লাস দুটি তৈরি করা হয়েছে। এগুলো ভিডিও এবং GIF ব্যাকগ্রাউন্ডে প্যারালাক্স ইফেক্ট প্রয়োগ করার জন্য।.parallax-videoএ ট্যাগ ব্যবহার করা হয়েছে, যেখানেautoplay,loop, এবংmutedঅ্যাট্রিবিউট ব্যবহার করা হয়েছে।.parallax-gifএ ট্যাগ ব্যবহার করা হয়েছে, যেখানে একটি অ্যানিমেটেড GIF ব্যাকগ্রাউন্ড হিসেবে ব্যবহার করা হয়েছে।
- CSS:
.parallax-videoএবং.parallax-gifসেকশনগুলোposition: fixedব্যবহার করে ওয়েবপেজের উপর ফিক্সড অবস্থানে রাখা হয়েছে।- ভিডিও এবং GIF কে
transform: translateX(-50%)দিয়ে সেন্টার করা হয়েছে এবংobject-fit: coverব্যবহার করে সেগুলোর সাইজ কন্ট্রোল করা হয়েছে।
- JavaScript:
window.scrollYদিয়ে স্ক্রল পজিশন ট্র্যাক করা হচ্ছে এবংtransform: translateY()ব্যবহার করে ভিডিও এবং GIF এর পজিশন কন্ট্রোল করা হচ্ছে।- ভিডিও ব্যাকগ্রাউন্ডটি ধীরে স্ক্রল হবে (
scrollPosition * 0.5), এবং GIF ব্যাকগ্রাউন্ডটি একটু দ্রুত স্ক্রল হবে (scrollPosition * 0.8)।
ফলস্বরূপ
এই কোডের মাধ্যমে, আপনি ওয়েবপেজে ভিডিও এবং animated GIF এর মাধ্যমে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারবেন। স্ক্রল করার সময় ভিডিও এবং GIF ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি হবে, যা একটি চিত্তাকর্ষক ও ডাইনামিক ওয়েব ডিজাইন সৃষ্টি করবে।
ভিডিও এবং animated GIF দিয়ে প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনে নতুন মাত্রা যোগ করে, যা ব্যবহারকারীদের জন্য আরো ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় অভিজ্ঞতা তৈরি করে।
Read more
