script.aculo.us এবং এর ভূমিকা
script.aculo.us একটি JavaScript লাইব্রেরি যা AJAX এবং DHTML ইফেক্টস তৈরির জন্য ব্যবহৃত হয়। এটি মূলত Prototype.js লাইব্রেরির উপরে ভিত্তি করে তৈরি করা হয়েছিল এবং ওয়েব ডেভেলপমেন্টে ইন্টারেক্টিভ ও এনিমেটেড ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে।
script.aculo.us এমন কিছু শক্তিশালী ইউজার ইন্টারফেস ইফেক্টস যেমন নির্দিষ্ট এলিমেন্টের উপর এনিমেশন, মোশন এফেক্টস, অপারেশনাল ইফেক্টস এবং সোশ্যাল মিডিয়া বা ওয়েব অ্যাপ্লিকেশনের জন্য অ্যানিমেটেড ইউআই উপাদান তৈরি করতে সহায়তা করে।
এখানে আমরা Advanced ইফেক্টস সমন্বয় এবং Animation Chain তৈরি নিয়ে আলোচনা করব, যা script.aculo.us লাইব্রেরি ব্যবহার করে করা সম্ভব।
Advanced ইফেক্টস সমন্বয় এবং Animation Chain
Animation Chain হল একটি কৌশল যেখানে একাধিক এনিমেশন বা ইফেক্ট একসাথে বা ধারাবাহিকভাবে পরিচালিত হয়। script.aculo.us লাইব্রেরি এটি করার জন্য কিছু শক্তিশালী ফাংশন প্রদান করে যা একাধিক এনিমেশনকে একত্রিত (combine) করতে এবং একটি নির্দিষ্ট অর্ডারে প্লে করতে সহায়তা করে।
ইফেক্ট এবং এনিমেশন সমন্বয়:
এখানে কিছু সাধারণ এনিমেশন ইফেক্ট এবং তাদের সমন্বয়ের উদাহরণ দেওয়া হলো।
১. Simple Fade এবং Slide এনিমেশন
এখানে প্রথমে একটি fadeIn এবং তারপর একটি slideUp এনিমেশন ব্যবহার করা হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced Effects with script.aculo.us</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style>
#box {
width: 200px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
display: none;
}
</style>
</head>
<body>
<div id="box">Hello World</div>
<script type="text/javascript">
// Fade-in followed by Slide-Up effect in sequence (Animation Chain)
function animateBox() {
new Effect.Appear('box', {
duration: 1, // Fade-in effect
afterFinish: function() {
new Effect.SlideUp('box', {
duration: 1, // Slide-up effect after fade-in
afterFinish: function() {
alert("Animation Completed!");
}
});
}
});
}
// Run the animation
animateBox();
</script>
</body>
</html>
ব্যাখ্যা:
- প্রথমে
Effect.Appearদিয়ে fade-in করা হয়, তারপরafterFinishকনফিগারেশন ব্যবহার করেEffect.SlideUpশুরু করা হয়। - এই ধরনের animation chain ব্যবহার করে একাধিক এনিমেশন একে অপরের পরে চলে।
২. Multiple Effects (Multiple Animation Chain)
একাধিক ইফেক্ট একসাথে বা ধারাবাহিকভাবে চেইন করে চালানো যেতে পারে। নিচে একাধিক Move, Fade এবং Scale ইফেক্ট একসাথে তৈরি করা হয়েছে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Effects Animation</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style>
#box {
width: 150px;
height: 150px;
background-color: green;
color: white;
text-align: center;
line-height: 150px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">Animate Me</div>
<script type="text/javascript">
// Multiple Effects: Move, Fade, Scale
function multipleAnimations() {
new Effect.Morph('box', {
style: { left: '200px', top: '200px' }, // Move the box
duration: 1,
afterFinish: function() {
new Effect.Fade('box', {
duration: 1, // Fade-out effect after move
afterFinish: function() {
new Effect.Scale('box', 0, { // Scale the box down to 0% size
duration: 1,
afterFinish: function() {
alert("All Effects Completed!");
}
});
}
});
}
});
}
// Trigger the animations
multipleAnimations();
</script>
</body>
</html>
ব্যাখ্যা:
- প্রথমে Effect.Morph দিয়ে বক্সটি সরানো হয়েছে।
- তারপর Effect.Fade দিয়ে বক্সটি ধীরে ধীরে ফেড আউট করা হয়েছে।
- পরিশেষে, Effect.Scale দিয়ে বক্সটিকে ছোট করে আনা হয়েছে।
- এই ফাংশনগুলো afterFinish কনফিগারেশন ব্যবহার করে একে অপরের পরে চলে, ফলে একটি Animation Chain তৈরি হয়।
৩. Synchronization এবং Callbacks
যখন আপনি একাধিক এনিমেশন চেইন করতে চান, তখন সেগুলোকে synchronize করা এবং callbacks ব্যবহার করা খুবই গুরুত্বপূর্ণ। নিচের উদাহরণে, দুইটি এনিমেশন একে অপরের পরে এবং নির্দিষ্ট সময় পর হবে:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chained Animations with Delay</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style>
#box {
width: 150px;
height: 150px;
background-color: red;
color: white;
text-align: center;
line-height: 150px;
position: absolute;
}
</style>
</head>
<body>
<div id="box">Animation</div>
<script type="text/javascript">
function chainedAnimations() {
new Effect.Morph('box', {
style: { left: '300px', top: '300px' },
duration: 1,
afterFinish: function() {
setTimeout(function() {
new Effect.Highlight('box', {
startcolor: '#ff0000',
endcolor: '#ffffff',
duration: 1,
afterFinish: function() {
alert("All Animations are done!");
}
});
}, 500); // Delay the highlight effect
}
});
}
// Trigger the animations
chainedAnimations();
</script>
</body>
</html>
ব্যাখ্যা:
- প্রথমে Effect.Morph দিয়ে বক্সটিকে সরানো হয়।
- তারপর setTimeout ব্যবহার করে ৫০০ মিলিসেকেন্ড পর Effect.Highlight ইফেক্ট চালানো হয়।
afterFinishকনফিগারেশনের মাধ্যমে একেকটি এনিমেশন শেষ হলে পরবর্তী এনিমেশন শুরু হয়, এবং এটি একটি delayed animation chain তৈরি করে।
৪. Animating Multiple Elements in Sequence
এখন, আমরা একাধিক এলিমেন্টের জন্য এনিমেশন চেইন তৈরি করতে পারি, যেখানে একটি এলিমেন্টের এনিমেশন শেষ হলে পরবর্তী এলিমেন্টের এনিমেশন শুরু হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple Elements Animation</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
color: white;
text-align: center;
line-height: 100px;
margin: 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<script type="text/javascript">
function animateBoxes() {
let boxes = document.querySelectorAll('.box');
let delay = 0;
boxes.forEach(function(box) {
new Effect.Morph(box, {
style: { left: '100px', top: '100px' },
duration: 1,
delay: delay,
afterFinish: function() {
delay += 1; // Add delay to the next box animation
}
});
});
}
// Start animation
animateBoxes();
</script>
</body>
</html>
ব্যাখ্যা:
- এখানে, আমরা একাধিক box এলিমেন্ট তৈরি করেছি এবং প্রতিটি এলিমেন্টে এনিমেশন প্রয়োগ করেছি।
- forEach লুপ ব্যবহার করে, প্রতিটি box-এর উপর এনিমেশন প্রয়োগ করা হয়েছে এবং delay যোগ করা হয়েছে যাতে এনিমেশনগুলো একে অপরের পরে চলে।
সারাংশ
script.aculo.us এর মাধ্যমে আপনি Advanced ইফেক্টস এবং Animation Chain তৈরি করতে পারেন, যা ওয়েব অ্যাপ্লিকেশন বা পেজের ইন্টারেকশন বাড়াতে সাহায্য করে। এর মধ্যে fade, slide, scale, highlight, move ইত্যাদি এনিমেশন ব্যবহার করে সিকোয়েন্সিয়াল এবং ডিলেড এনিমেশন চেইন তৈরি করা যায়। Callbacks, setTimeout, এবং afterFinish ফিচার ব্যবহার করে এনিমেশনগুলিকে একে অপরের পরে বা নির্দিষ্ট সময়ে চালানো সম্ভব হয়।
Read more
