প্যারালাক্স স্ক্রলিং ইফেক্টের সাথে CSS Animation এবং CSS Transitions ব্যবহার করে ওয়েব ডিজাইনে আরও ডাইনামিক এবং আকর্ষণীয় ইফেক্ট যোগ করা সম্ভব। এর মাধ্যমে আপনি বিভিন্ন কন্টেন্ট বা ব্যাকগ্রাউন্ড এলিমেন্টগুলির গতির পরিবর্তন এবং অ্যানিমেশন করতে পারেন, যা প্যারালাক্স স্ক্রলিংয়ের অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং ভিজ্যুয়ালি আকর্ষণীয় করে তোলে।
Srallax এর জন্য CSS Animation এবং Transition কীভাবে কাজ করে
CSS Animation এবং CSS Transition উভয়ই উপাদানগুলির অবস্থান, আকার, বা ভিজ্যুয়াল স্টাইল পরিবর্তন করতে ব্যবহার করা হয়। প্যারালাক্স স্ক্রলিং ইফেক্টের মধ্যে এই অ্যানিমেশন এবং ট্রানজিশন যোগ করা হলে, আপনি স্ক্রলিংয়ের সময় বিশেষ অ্যানিমেশন বা ভিজ্যুয়াল পরিবর্তন দেখতে পাবেন।
উদাহরণ: Srallax এর জন্য CSS Animation এবং Transition যোগ করা
ধরা যাক, আমাদের একটি প্যারালাক্স ওয়েবসাইট আছে এবং আমরা চাই ব্যাকগ্রাউন্ডে স্ক্রলিংয়ের সাথে কিছু অ্যানিমেশন এবং স্লাইডিং ইফেক্ট যুক্ত করতে। নিচে সেই উদাহরণ দেওয়া হলো:
১. 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 Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section with Animation -->
<div class="parallax-container">
<div class="parallax-background"></div>
<div class="content">
<h1>Scroll to see animation</h1>
<p>This is an example of CSS animation with Parallax Scrolling effect!</p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
২. CSS ফাইল (styles.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 Container */
.parallax-container {
position: relative;
height: 100vh;
overflow: hidden;
}
/* Parallax Background */
.parallax-background {
background-image: url('your-image.jpg'); /* Replace with your image */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-attachment: fixed;
background-size: cover;
background-position: center;
animation: slideBackground 10s linear infinite; /* Add animation */
}
/* Content Styling */
.content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
text-align: center;
font-size: 2em;
opacity: 0; /* Start with hidden */
transition: opacity 1s ease-in-out; /* Smooth transition */
}
/* Fade In Effect when Scrolling */
.content.visible {
opacity: 1; /* Make content visible */
}
/* Animation for the Background */
@keyframes slideBackground {
0% {
background-position: center;
}
50% {
background-position: left;
}
100% {
background-position: center;
}
}
৩. JavaScript (script.js)
এই JavaScript কোডটি স্ক্রল করার সময় .content সেকশনের fade-in অ্যানিমেশন প্রয়োগ করতে ব্যবহৃত হবে।
// script.js
// Listen for scroll event
window.addEventListener('scroll', function() {
const content = document.querySelector('.content');
// Check if the content section is in the viewport
const contentPosition = content.getBoundingClientRect().top;
const screenPosition = window.innerHeight / 1.3; // Trigger animation when 30% of the content is visible
if (contentPosition < screenPosition) {
content.classList.add('visible'); // Add visible class to trigger fade-in animation
}
});
কোড ব্যাখ্যা
- HTML:
.parallax-containerএবং.parallax-backgroundব্যবহার করা হয়েছে প্যারালাক্স ইফেক্ট তৈরি করার জন্য।.contentসেকশনে টেক্সট এবং অন্যান্য কন্টেন্ট রাখা হয়েছে, যা স্ক্রল করার সময় স্ক্রিনে ফেড ইন হবে।
- CSS:
@keyframes slideBackground: এই CSS অ্যানিমেশন ব্যাকগ্রাউন্ড ইমেজের পজিশন পরিবর্তন করে, যাতে ব্যাকগ্রাউন্ড ধীরে স্ক্রল হয় এবং স্লাইডিং ইফেক্ট তৈরি হয়।.content: এখানেopacity: 0;ব্যবহার করা হয়েছে, যার মাধ্যমে কন্টেন্ট স্ক্রল করার পরই দৃশ্যমান হবে।.content.visible: JavaScript এর মাধ্যমেvisibleক্লাস যোগ করা হলে, কন্টেন্টটিopacityপরিবর্তন হয়ে ফেড ইন হবে।
- JavaScript:
- স্ক্রল ইভেন্টের মাধ্যমে
.contentসেকশনের অবস্থান ট্র্যাক করা হয় এবং যখন এটি স্ক্রীনের ৩০% অংশ দৃশ্যমান হয়, তখন এটি fade-in অ্যানিমেশন শুরু করে।
- স্ক্রল ইভেন্টের মাধ্যমে
CSS Animation এবং Transition এর সুবিধা
- নতুন ভিজ্যুয়াল ইফেক্ট: প্যারালাক্স স্ক্রলিং এর সাথে অ্যানিমেশন এবং ট্রানজিশন ব্যবহার করে আপনি নতুন ধরনের ভিজ্যুয়াল ইফেক্ট তৈরি করতে পারেন, যা আপনার ওয়েবসাইটের অভিজ্ঞতা উন্নত করে।
- ইন্টারঅ্যাকটিভ: এটি ব্যবহারকারীদের স্ক্রল করার সময় ইন্টারঅ্যাকটিভ অনুভূতি দেয়, যা তাদের ওয়েবপেজে আরও বেশি সময় কাটাতে উৎসাহিত করে।
- সহজ এবং কার্যকরী: CSS এর মাধ্যমে অ্যানিমেশন এবং ট্রানজিশন তৈরি করা সহজ এবং এটি পারফরম্যান্সে প্রভাব ফেলে না, কারণ JavaScript এর তুলনায় এটি লাইটওয়েট।
সারাংশ
CSS Animation এবং CSS Transition প্যারালাক্স স্ক্রলিং ইফেক্টে যুক্ত করলে তা একটি ডাইনামিক এবং আকর্ষণীয় ওয়েব ডিজাইনে রূপান্তরিত হয়। এই প্রযুক্তিগুলি ব্যবহার করে আপনি স্ক্রলিংয়ের সাথে ইন্টারঅ্যাকটিভ অ্যানিমেশন এবং স্লাইডিং ইফেক্ট যুক্ত করতে পারবেন। Srallax.js এর সাথে CSS অ্যানিমেশন এবং ট্রানজিশন প্রয়োগ করলে ওয়েবসাইটের ইউজার এক্সপিরিয়েন্স আরও উন্নত হয় এবং এটি ভিজ্যুয়ালি আকর্ষণীয় হয়ে ওঠে।
Read more
