ScrollMagic এবং GSAP হল দুটি শক্তিশালী লাইব্রেরি যা একত্রে প্যারালাক্স স্ক্রলিং এবং স্ক্রোল-ট্রিগারড অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। ScrollMagic স্ক্রল ইভেন্ট ট্র্যাক করে এবং GSAP অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এই দুইটি লাইব্রেরি একসাথে ব্যবহারে আপনি আরও স্মুথ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারবেন।
ScrollMagic এবং GSAP ব্যবহার করে প্যারালাক্স স্ক্রলিং অ্যানিমেশন তৈরির ধাপ
- লাইব্রেরিগুলি ইনস্টল করুন
প্রথমে আপনাকে ScrollMagic এবং GSAP লাইব্রেরি দুটি আপনার HTML ফাইলে ইনক্লুড করতে হবে।
CDN ইনক্লুড করা:
<!-- ScrollMagic -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<!-- GSAP -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.0/gsap.min.js"></script>
- 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 GSAP and ScrollMagic</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<section class="parallax-section">
<div class="parallax-content">
<h1>Scroll to Animate</h1>
</div>
</section>
<section class="content">
<p>Keep scrolling to see the animation triggered by scroll.</p>
</section>
<section class="parallax-section">
<div class="parallax-content">
<h1>More Animation!</h1>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
- CSS স্টাইলিং তৈরি করুন
এখন CSS ফাইলের মাধ্যমে পেজের স্টাইলিং যোগ করুন। এখানে আমরা কিছু প্যারালাক্স সেকশন তৈরি করব, যাতে ব্যাকগ্রাউন্ড স্ক্রল হয় এবং কন্টেন্ট স্ক্রলিংয়ের সময় অ্যানিমেটেড হয়।
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
section {
padding: 100px 0;
text-align: center;
}
.parallax-section {
position: relative;
background: url('https://via.placeholder.com/1500x500') center center no-repeat;
background-size: cover;
height: 100vh;
}
.parallax-content {
position: relative;
z-index: 10;
color: white;
font-size: 3rem;
}
.content {
background: #f0f0f0;
padding: 50px 0;
}
- JavaScript কোড লিখুন (ScrollMagic এবং GSAP)
এখন ScrollMagic এবং GSAP লাইব্রেরি দিয়ে স্ক্রল ইভেন্ট ট্র্যাক করে অ্যানিমেশন তৈরি করতে হবে।
// ScrollMagic Controller
var controller = new ScrollMagic.Controller();
// GSAP Animation
var parallaxAnimation = gsap.to(".parallax-content", {
y: "-200px", // Move the content upward
opacity: 0, // Fade out the content
duration: 1,
ease: "power2.out"
});
// ScrollMagic Scene
var scene = new ScrollMagic.Scene({
triggerElement: ".parallax-section", // Element to trigger animation
triggerHook: 0.7, // Trigger point (0.7 means 70% of the screen)
duration: "100%" // The duration of the animation
})
.setTween(parallaxAnimation) // Apply GSAP animation
.addTo(controller); // Add scene to ScrollMagic controller
কোডের ব্যাখ্যা
- ScrollMagic Controller:
- ScrollMagic.Controller() ব্যবহার করে স্ক্রল ইভেন্ট ট্র্যাক করার জন্য একটি কন্ট্রোলার তৈরি করা হয়।
- GSAP Animation:
- GSAP দিয়ে
.parallax-contentক্লাসের জন্য একটি অ্যানিমেশন তৈরি করা হয়েছে। এখানেy: "-200px"ব্যাকগ্রাউন্ডের কন্টেন্টকে উপরের দিকে মুভ করাবে এবংopacity: 0ব্যবহার করে কন্টেন্টটি ধীরে ধীরে ফেড আউট হবে।
- GSAP দিয়ে
- ScrollMagic Scene:
.parallax-sectionএলিমেন্টের স্ক্রল ট্রিগার করার জন্য একটি scene তৈরি করা হয়েছে।- triggerElement প্রপার্টি দিয়ে ট্রিগার এলিমেন্ট সেট করা হয়েছে।
- triggerHook: 0.7 এর মাধ্যমে 70% স্ক্রল হলে অ্যানিমেশন শুরু হবে।
- duration: "100%" দ্বারা অ্যানিমেশনের মোট সময় নির্ধারণ করা হয়েছে।
.setTween():- GSAP অ্যানিমেশনকে ScrollMagic সীনে অ্যাটাচ করা হয়েছে, যাতে স্ক্রলিংয়ের সময় অ্যানিমেশন কার্যকর হয়।
addTo(controller):- ScrollMagic কন্ট্রোলারে সীনের যুক্তকরণ।
ফলস্বরূপ
এই কোডের মাধ্যমে, যখন আপনি স্ক্রল করবেন, তখন প্যারালাক্স ব্যাকগ্রাউন্ড স্ক্রল হবে এবং কন্টেন্টটি উর্ধ্বে উঠবে এবং ধীরে ধীরে ফেড আউট হবে। ScrollMagic এবং GSAP ব্যবহার করে এই ধরনের স্ক্রোল-ট্রিগারড অ্যানিমেশন আরও স্মুথ এবং ইন্টারঅ্যাকটিভ হবে।
সারাংশ
ScrollMagic এবং GSAP এর কম্বিনেশন প্যারালাক্স স্ক্রলিং এবং স্ক্রোল-ট্রিগারড অ্যানিমেশন তৈরি করার জন্য একটি শক্তিশালী টুল। ScrollMagic স্ক্রল ইভেন্ট ট্র্যাক করার কাজটি করে এবং GSAP অ্যানিমেশন তৈরি করে, যার ফলে একটি স্মুথ এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করা যায়। এই লাইব্রেরিগুলির সাহায্যে আপনি ওয়েবসাইটে আরো উন্নত এবং আকর্ষণীয় অ্যানিমেশন তৈরি করতে পারবেন।
Read more
