স্ক্রিপ্ট.অ্যাকুলো.ইউএস (script.aculo.us) কি?
script.aculo.us একটি JavaScript লাইব্রেরি যা Ajax, DOM manipulation, এবং Animations সংক্রান্ত অনেক উন্নত বৈশিষ্ট্য সরবরাহ করে। এটি Prototype.js লাইব্রেরির সাথে কাজ করে এবং ওয়েব ডেভেলপমেন্টে ইন্টারঅ্যাকটিভ, রেসপন্সিভ এবং আকর্ষণীয় অ্যানিমেশন এবং ইফেক্ট তৈরি করতে সহায়তা করে। এই লাইব্রেরি দ্বারা আপনি আপনার ওয়েবসাইটে সহজেই অ্যানিমেশন, ড্র্যাগ এবং ড্রপ ইফেক্ট, পপআপ ইফেক্ট এবং আরও অনেক ধরনের ইউজার ইন্টারফেস অ্যানিমেশন প্রয়োগ করতে পারেন।
প্রথম Animation এবং Effect তৈরি করা
script.aculo.us লাইব্রেরি ব্যবহার করে প্রথম অ্যানিমেশন এবং ইফেক্ট তৈরি করা খুবই সহজ। আপনি বিভিন্ন ধরনের অ্যানিমেশন যেমন অবজেক্টের আকার পরিবর্তন, অবস্থান পরিবর্তন, ফেড ইন/আউট ইত্যাদি তৈরি করতে পারেন।
১. স্ক্রিপ্ট.অ্যাকুলো.ইউএস ইনস্টলেশন
প্রথমে আপনার ওয়েব পেজে script.aculo.us এবং Prototype.js লোড করতে হবে।
- Prototype.js এবং script.aculo.us লোড করা:
<!-- Prototype.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<!-- script.aculo.us -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/script.aculo.us/1.8.3/scriptaculous.js"></script>
২. প্রথম অ্যানিমেশন তৈরি করা
ধরা যাক, আপনি একটি ডিভে অ্যানিমেশন প্রয়োগ করতে চান, যা মাউসের উপর আছড়ে পড়লে আকার পরিবর্তন করবে।
<!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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3.0/prototype.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/script.aculo.us/1.8.3/scriptaculous.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
margin: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
// Animating the box on mouseover
document.getElementById("box").observe("mouseover", function() {
new Effect.Scale("box", 2, { duration: 0.5 });
});
// Resetting the box size when mouse leaves
document.getElementById("box").observe("mouseout", function() {
new Effect.Scale("box", 1, { duration: 0.5 });
});
</script>
</body>
</html>
এখানে, যখন ব্যবহারকারী ডিভের উপর মাউস হোভার করবেন, তখন ডিভটির আকার ২ গুণ বড় হবে (ফ্যাক্টর ২) এবং যখন মাউস চলে যাবে, তখন ডিভটি পূর্বের আকারে ফিরে আসবে।
Effect.Scaleএকটি ইফেক্ট যা একটি অবজেক্টের আকার পরিবর্তন করে।duration: 0.5হল অ্যানিমেশনের সময়কাল, যা এখানে ০.৫ সেকেন্ড।
৩. ইফেক্টস ব্যবহার করা
script.aculo.us লাইব্রেরিতে বিভিন্ন ধরনের ইফেক্ট আছে, যেমন fade, move, highlight, blindUp/Down, ইত্যাদি। নিচে কিছু সাধারণ ইফেক্টের উদাহরণ দেওয়া হলো।
Fade Effect:
<div id="fadeBox" style="width:100px; height:100px; background-color: blue;"></div>
<script type="text/javascript">
// Fading in the box
new Effect.Fade("fadeBox", { duration: 1.0 });
</script>
এখানে, Effect.Fade ইফেক্টটি ব্যবহার করে ডিভটি ১ সেকেন্ডের মধ্যে ফেড আউট হয়ে যাবে।
Move Effect:
<div id="moveBox" style="width:100px; height:100px; background-color: green;"></div>
<script type="text/javascript">
// Moving the box to the right
new Effect.Move("moveBox", { x: 200, y: 0, duration: 1 });
</script>
এখানে, Effect.Move ব্যবহার করে moveBox ডিভটি ২০০ পিক্সেল ডানে সরানো হচ্ছে।
Highlight Effect:
<div id="highlightBox" style="width:100px; height:100px; background-color: yellow;"></div>
<script type="text/javascript">
// Highlighting the box
new Effect.Highlight("highlightBox", { duration: 1.0 });
</script>
এখানে, Effect.Highlight ইফেক্টটি ডিভটির পটভূমি রঙ পরিবর্তন করে একটি হাইলাইট ইফেক্ট তৈরি করবে।
ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করা
আপনি script.aculo.us এর Event.observe() এবং অন্যান্য ইভেন্ট হ্যান্ডলার ব্যবহার করে আরও ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করতে পারেন। এর মাধ্যমে ব্যবহারকারী একাধিক ইন্টারঅ্যাকশনের মাধ্যমে ইফেক্ট দেখতে পাবেন।
উদাহরণ:
<div id="box" style="width: 100px; height: 100px; background-color: pink; margin: 50px;">
Hover me to change size!
</div>
<script type="text/javascript">
// Create an event handler for mouseover and mouseout
Event.observe("box", "mouseover", function() {
new Effect.Scale("box", 2, { duration: 0.5 });
});
Event.observe("box", "mouseout", function() {
new Effect.Scale("box", 1, { duration: 0.5 });
});
</script>
এখানে, আমরা Event.observe() ব্যবহার করেছি যা ইভেন্টের উপর ভিত্তি করে অ্যানিমেশন এবং ইফেক্ট তৈরি করে।
সারাংশ
script.aculo.us একটি শক্তিশালী লাইব্রেরি যা সহজেই অ্যানিমেশন এবং ইফেক্ট তৈরি করতে সহায়তা করে। আপনি DOM manipulation, animations, এবং interactive effects তৈরি করতে পারেন এর মাধ্যমে। এখানে ব্যবহৃত Effect.Scale, Effect.Fade, Effect.Move, এবং Effect.Highlight ইফেক্টগুলো দ্বারা আপনি ওয়েব পেজে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ অ্যানিমেশন তৈরি করতে পারেন।
Read more
