ScrollMagic একটি শক্তিশালী JavaScript লাইব্রেরি, যা ওয়েবপেজে স্ক্রলিংয়ের সাথে অ্যানিমেশন এবং প্যারালাক্স ইফেক্ট যোগ করতে ব্যবহৃত হয়। এটি ব্যবহারকারীর স্ক্রল মুভমেন্ট ট্র্যাক করে এবং বিভিন্ন কন্টেন্ট বা এলিমেন্টে ডাইনামিক এফেক্টস তৈরি করে। এই লাইব্রেরি ব্যবহার করে আপনি সহজেই Srallax Scrolling এবং Animation যুক্ত করতে পারেন।
ScrollMagic লাইব্রেরি দিয়ে Srallax Scrolling এবং Animation তৈরি করার প্রক্রিয়া
১. লাইব্রেরি ইনস্টল করা
প্রথমেই, ScrollMagic লাইব্রেরিটি আপনার প্রোজেক্টে অন্তর্ভুক্ত করতে হবে। আপনি CDN বা npm এর মাধ্যমে লাইব্রেরি যোগ করতে পারেন। এখানে CDN ব্যবহার করার উদাহরণ দেওয়া হলো:
<!-- ScrollMagic CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.0/gsap.min.js"></script>
এছাড়াও, GSAP (GreenSock Animation Platform) লাইব্রেরিটি অ্যানিমেশন এবং ট্রানজিশন ইফেক্ট করার জন্য ব্যবহার করা হয় এবং ScrollMagic এর সাথে এটি সহজেই কাজ করে।
২. HTML স্ট্রাকচার
এখন, HTML ফাইলে প্যারালাক্স এবং অ্যানিমেশন প্রভাব তৈরি করতে কিছু এলিমেন্ট তৈরি করতে হবে। উদাহরণস্বরূপ, আমরা একটি সেকশন তৈরি করব যেখানে ব্যাকগ্রাউন্ড স্ক্রল হবে এবং কিছু কন্টেন্ট অ্যানিমেট হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScrollMagic Parallax and Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Parallax Section -->
<div class="parallax-section">
<h2 class="animate-text">Scroll to Animate</h2>
</div>
<div class="content">
<p>This content is static and doesn't move during scrolling.</p>
</div>
<div class="parallax-section">
<h2 class="animate-text">More Scrolling Effects</h2>
</div>
<script src="script.js"></script>
</body>
</html>
৩. CSS স্টাইল
এখন CSS ব্যবহার করে প্যারালাক্স ইফেক্ট এবং অ্যানিমেশন কন্টেন্টের জন্য কিছু স্টাইল তৈরি করতে হবে।
/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
}
/* Parallax Section */
.parallax-section {
height: 100vh;
background: url('background-image.jpg') center/cover no-repeat;
position: relative;
}
.animate-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
}
/* Content Section */
.content {
padding: 50px;
background-color: #f4f4f4;
text-align: center;
}
.content p {
font-size: 1.5rem;
}
৪. JavaScript (ScrollMagic) কনফিগার করা
এখন, ScrollMagic লাইব্রেরি ব্যবহার করে প্যারালাক্স স্ক্রলিং এবং অ্যানিমেশন যুক্ত করা হবে। এখানে আমরা দুটি কাজ করব:
- প্যারালাক্স স্ক্রলিং (ব্যাকগ্রাউন্ড ইমেজের গতির পরিবর্তন)।
- কন্টেন্টের জন্য অ্যানিমেশন (টেক্সট বা এলিমেন্টগুলির ফেড ইন বা মুভমেন্ট ইফেক্ট)।
// Initialize ScrollMagic Controller
const controller = new ScrollMagic.Controller();
// Parallax Scrolling Effect
new ScrollMagic.Scene({
triggerElement: '.parallax-section',
triggerHook: 'onLeave', // When the section leaves the viewport
duration: '100%' // Duration of the effect
})
.setTween('.parallax-section', {backgroundPosition: 'center ' + (window.innerHeight / 2) + 'px'})
.addTo(controller);
// Animation on Scroll
new ScrollMagic.Scene({
triggerElement: '.animate-text', // Element to trigger the animation
triggerHook: 0.9, // Trigger when the element is 90% into the viewport
reverse: false // The animation runs only once
})
.setTween('.animate-text', {opacity: 1, y: '0%', ease: 'Power1.easeInOut'})
.addTo(controller);
কোড ব্যাখ্যা
- ScrollMagic Controller: প্রথমে, আমরা ScrollMagic এর Controller ইন্সট্যান্স তৈরি করি, যা সকল স্ক্রলিং ইভেন্ট এবং অ্যানিমেশন ট্র্যাক করে।
- Parallax Scrolling:
triggerElement: '.parallax-section'সেটি নির্দেশ করে, যেই সেকশনটি স্ক্রল করলে প্যারালাক্স ইফেক্ট কার্যকর হবে।setTweenব্যবহার করে, ব্যাকগ্রাউন্ড ইমেজের অবস্থান পরিবর্তন করতে বলেছি। এটি স্ক্রল করার সাথে সাথে ব্যাকগ্রাউন্ডের গতির পরিবর্তন ঘটায়।
- Animation on Scroll:
.animate-textক্লাসের টেক্সট স্ক্রল হলে সেটি অ্যানিমেট হবে। এখানেsetTweenএর মাধ্যমে ফেড ইন এবং Y অক্ষ বরাবর স্থানান্তর করতে বলা হয়েছে।.y: '0%'এবংopacity: 1টেক্সটটি ৯০% স্ক্রল হওয়ার পর ফেড ইন হয়ে তার মূল অবস্থানে চলে আসবে।
ফলস্বরূপ
এই কোডটি ব্যবহারের মাধ্যমে আপনি একটি উন্নত Srallax Scrolling এবং Animation ইফেক্ট তৈরি করতে পারবেন, যেখানে ব্যাকগ্রাউন্ড স্ক্রল হবে এবং কন্টেন্ট অ্যানিমেট হবে যখন ব্যবহারকারী স্ক্রল করবে। এটি আপনার ওয়েবসাইটে একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ অভিজ্ঞতা যোগ করবে।
ScrollMagic লাইব্রেরি আপনাকে স্ক্রলিং এর সাথে মসৃণ অ্যানিমেশন এবং প্যারালাক্স ইফেক্ট তৈরি করতে সাহায্য করে, যা ওয়েব ডিজাইনে নতুন মাত্রা যোগ করে।
Read more
