script.aculo.us এবং ইফেক্টস
script.aculo.us হল একটি JavaScript লাইব্রেরি যা ব্যবহারকারীদের ইন্টারেক্টিভ ওয়েব পৃষ্ঠাগুলোর জন্য বেশ কিছু ইফেক্ট এবং অ্যানিমেশন তৈরির সুবিধা দেয়। এটি মূলত Prototype.js এর উপর ভিত্তি করে তৈরি করা হয়েছিল এবং ওয়েব পৃষ্ঠার বিভিন্ন উপাদানে অ্যানিমেশন এবং ইন্টারেকশন যুক্ত করার জন্য ব্যবহার করা হয়।
script.aculo.us লাইব্রেরি আপনাকে এফেক্টস এর মাধ্যমে ওয়েব পেজের উপাদানগুলোতে ডাইনামিকতা এবং জীবন্ততা আনতে সাহায্য করে। এর মধ্যে বেশ কিছু জনপ্রিয় ইফেক্ট রয়েছে, যেমন fade, slide, grow, shrink, scale, highlight, ইত্যাদি। আপনি এসব ইফেক্টগুলো একসাথে ব্যবহার করে আরও আকর্ষণীয় এবং ইন্টারেক্টিভ ওয়েব পেজ তৈরি করতে পারেন।
Multiple ইফেক্টস একসাথে ব্যবহার করা
script.aculo.us-এ একাধিক ইফেক্ট একসাথে ব্যবহার করতে Effect.Parallel এবং Effect.Sequence ফাংশন ব্যবহার করা হয়। এই ফাংশনগুলির মাধ্যমে আপনি একাধিক ইফেক্ট একই সাথে বা একে একে অ্যানিমেট করতে পারবেন।
১. Effect.Parallel ব্যবহার করা
Effect.Parallel ফাংশনটি একাধিক ইফেক্টকে একসাথে চালানোর জন্য ব্যবহৃত হয়। এটি বিভিন্ন ইফেক্ট একই সময়ে কার্যকর করতে সহায়তা করে।
উদাহরণ:
ধরা যাক, আপনি একটি ডিভের উপর fadeOut এবং scale ইফেক্ট একসাথে চালাতে চান:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Example</title>
<script src="prototype.js"></script>
<script src="scriptaculous.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: blue;
color: white;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="box">Click me!</div>
<script>
// Multiple effects using Effect.Parallel
document.getElementById('box').onclick = function() {
new Effect.Parallel([
new Effect.Fade('box', { duration: 1 }), // Fade effect
new Effect.Scale('box', 0, { duration: 1 }) // Scale effect
], {
delay: 0.5, // Delay before the effects start
});
}
</script>
</body>
</html>
এখানে, যখন ডিভ #box ক্লিক করা হবে, তখন Effect.Fade এবং Effect.Scale ইফেক্ট দুইটি একসাথে কার্যকর হবে। duration এর মাধ্যমে আপনি ইফেক্টের সময় নির্ধারণ করতে পারেন এবং delay দিয়ে ইফেক্ট শুরু হওয়ার জন্য কিছু সময় অপেক্ষা করতে পারেন।
২. Effect.Sequence ব্যবহার করা
Effect.Sequence ফাংশনটি একের পর এক ইফেক্ট চালানোর জন্য ব্যবহৃত হয়। এটি ব্যবহৃত হলে, একটি ইফেক্ট শেষ হওয়ার পরই পরবর্তী ইফেক্ট শুরু হয়।
উদাহরণ:
ধরা যাক, আপনি একটি ডিভের উপর grow এবং shrink ইফেক্ট একে একে চালাতে চান:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Example</title>
<script src="prototype.js"></script>
<script src="scriptaculous.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: green;
color: white;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="box">Click me!</div>
<script>
// Multiple effects using Effect.Sequence
document.getElementById('box').onclick = function() {
new Effect.Sequence([
new Effect.Grow('box', { duration: 1 }), // Grow effect
new Effect.Shrink('box', { duration: 1 }) // Shrink effect
]);
}
</script>
</body>
</html>
এখানে, Effect.Grow ইফেক্ট প্রথমে কার্যকর হবে, এবং এর পর Effect.Shrink ইফেক্ট চলবে। এই ইফেক্ট দুটি একে একে কাজ করবে।
৩. Multiple Effects এর সঙ্গে Callback ফাংশন ব্যবহার
আপনি callback ফাংশন ব্যবহার করে ইফেক্টগুলো শেষ হওয়ার পর কিছু নির্দিষ্ট কাজও করতে পারেন। এই ফাংশনটি খুবই কার্যকর যখন আপনি একাধিক ইফেক্টের মধ্যে কিছু নির্দিষ্ট লজিক প্রয়োগ করতে চান।
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>script.aculo.us Example</title>
<script src="prototype.js"></script>
<script src="scriptaculous.js"></script>
<style>
#box {
width: 200px;
height: 200px;
background-color: purple;
color: white;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div id="box">Click me!</div>
<script>
// Multiple effects with callback function
document.getElementById('box').onclick = function() {
new Effect.Parallel([
new Effect.Fade('box', { duration: 1 }), // Fade effect
new Effect.Scale('box', 0, { duration: 1 }) // Scale effect
], {
afterFinish: function() {
alert('Both effects are completed!');
}
});
}
</script>
</body>
</html>
এখানে, afterFinish কলব্যাক ফাংশনটি ব্যবহার করা হয়েছে, যা ইফেক্টগুলি সম্পন্ন হওয়ার পর চলে আসে এবং একটি এলার্ট দেখায়।
সারাংশ
script.aculo.us লাইব্রেরি ব্যবহার করে আপনি ওয়েব পৃষ্ঠার উপাদানগুলোতে একাধিক ইফেক্ট একসাথে ব্যবহার করতে পারেন। Effect.Parallel এবং Effect.Sequence ফাংশনের মাধ্যমে আপনি ইফেক্টগুলোকে একসাথে বা একে একে প্রয়োগ করতে পারবেন। এর মাধ্যমে ওয়েব পেজের ইন্টারেকশন এবং ইউজার এক্সপেরিয়েন্স উন্নত করা যায়। এছাড়া, callback ফাংশন ব্যবহার করে ইফেক্ট শেষে নির্দিষ্ট কাজ সম্পাদন করা সম্ভব। এই টুলস ব্যবহার করে আপনি ওয়েব পেজে সুন্দর এবং সাড়া জাগানো অ্যানিমেশন তৈরি করতে পারবেন।
Read more
