jQueryUI আপনাকে Custom Animations এবং Transitions তৈরি করার মাধ্যমে ওয়েব পেজের উপাদানগুলোকে আরও আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ করার সুবিধা প্রদান করে। আপনি সহজেই animate() মেথড ব্যবহার করে কাস্টম অ্যানিমেশন এবং ট্রানজিশন তৈরি করতে পারেন। এই অ্যানিমেশনগুলি ব্যবহারকারীর অভিজ্ঞতাকে আরও স্মার্ট এবং প্রাকৃতিক করে তোলে।
jQueryUI এর Animate() মেথড ব্যবহার
animate() মেথড jQueryUI এর একটি গুরুত্বপূর্ণ ফিচার যা বিভিন্ন CSS প্রপার্টি অ্যানিমেটেডভাবে পরিবর্তন করতে ব্যবহৃত হয়। আপনি এটি ব্যবহার করে ওয়েব পেজের যে কোনো উপাদানের (যেমন: প্যানেল, বাটন, ডিভ, ইত্যাদি) স্টাইল পরিবর্তন করতে পারেন।
animate() মেথডের সিনট্যাক্স
$(selector).animate({
property1: value1,
property2: value2,
...
}, speed, easing, callback);
- property1, property2: এখানে CSS প্রপার্টি উল্লেখ করা হয় (যেমন, width, height, margin, padding ইত্যাদি)।
- value1, value2: এর মান (যেমন, 200px, 50%, 1, rgba(255, 0, 0, 0.5) ইত্যাদি)।
- speed: অ্যানিমেশনটির গতি (ms বা 'slow', 'fast')।
- easing: অ্যানিমেশনটির গতি বৃদ্ধি বা কমানোর পদ্ধতি (যেমন, "linear", "swing")।
- callback: অ্যানিমেশন শেষে একটি ফাংশন চালানো।
উদাহরণ ১: একটি ডিভ এলিমেন্টকে অ্যানিমেটেডভাবে সরানো
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Animation Example</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
#box {
width: 100px;
height: 100px;
background-color: #3498db;
position: relative;
}
</style>
</head>
<body>
<button id="animateButton">এটি ক্লিক করুন</button>
<div id="box"></div>
<script>
$(document).ready(function() {
$("#animateButton").click(function() {
$("#box").animate({
left: '300px', // 300px ডান দিকে সরানো হবে
height: '150px', // উচ্চতা বৃদ্ধি
width: '150px' // প্রস্থ বৃদ্ধি
}, 1000); // অ্যানিমেশন 1 সেকেন্ডে সম্পন্ন হবে
});
});
</script>
</body>
</html>
এখানে animate() মেথড ব্যবহার করে ডিভের পজিশন, প্রস্থ এবং উচ্চতা পরিবর্তন করা হয়েছে।
উদাহরণ ২: একাধিক অ্যানিমেশন একসাথে
$("#box").animate({
left: '100px',
opacity: 0.5
}, 1500).animate({
top: '100px',
opacity: 1
}, 1500);
এখানে, প্রথমে ডিভটি 100px বাম দিকে সরানো হচ্ছে এবং তার অপাসিটি কমানো হচ্ছে, পরে 100px উপরে উঠানো হচ্ছে এবং অপাসিটি পুনরায় বাড়ানো হচ্ছে।
jQueryUI-এর Transition Effects
jQueryUI-তে transition effects তৈরি করা খুবই সহজ। আপনি CSS ট্রানজিশন বা অ্যানিমেশন ব্যবহার করে ওয়েব পেজের উপাদানগুলিতে মসৃণ ট্রানজিশন প্রভাব তৈরি করতে পারেন। এই প্রভাবগুলি ডিফল্টভাবে show(), hide(), fadeIn(), fadeOut(), slideUp(), slideDown() ইত্যাদি জাভাস্ক্রিপ্ট ফাংশনগুলো দিয়ে সম্পাদিত হয়।
উদাহরণ ১: fadeIn() এবং fadeOut() ট্রানজিশন
$("#fadeInButton").click(function() {
$("#box").fadeIn(1000); // 1 সেকেন্ডে এলিমেন্টটি ফেড ইন হবে
});
$("#fadeOutButton").click(function() {
$("#box").fadeOut(1000); // 1 সেকেন্ডে এলিমেন্টটি ফেড আউট হবে
});
এখানে, fadeIn() এবং fadeOut() মেথড দিয়ে আপনি সহজেই এলিমেন্টের দৃশ্যমানতা পরিবর্তন করতে পারেন।
উদাহরণ ২: slideDown() এবং slideUp() ট্রানজিশন
$("#slideDownButton").click(function() {
$("#box").slideDown(1000); // 1 সেকেন্ডে স্লাইড ডাউন হবে
});
$("#slideUpButton").click(function() {
$("#box").slideUp(1000); // 1 সেকেন্ডে স্লাইড আপ হবে
});
এখানে, slideDown() এবং slideUp() মেথড দিয়ে এলিমেন্টকে স্লাইড ইন এবং স্লাইড আউট করা হয়েছে।
Custom Animations এবং Transitions কাস্টমাইজ করা
আপনি jQueryUI দিয়ে যেকোনো CSS properties যেমন width, height, margin, padding, opacity, background-color ইত্যাদি পরিবর্তন করতে পারেন। এছাড়াও, আপনি callback ফাংশন ব্যবহার করে অ্যানিমেশন শেষে কোনো কার্যক্রম সম্পাদন করতে পারেন।
উদাহরণ: Custom Transition এবং Callback
$("#box").animate({
width: "300px",
height: "300px",
backgroundColor: "#e74c3c"
}, 2000, "swing", function() {
alert("অ্যানিমেশন শেষ!");
});
এখানে, animate() মেথডের শেষে একটি callback ফাংশন ব্যবহার করা হয়েছে, যা অ্যানিমেশন শেষ হলে একটি এলার্ট দেখাবে।
উপসংহার
jQueryUI এর custom animations এবং transitions ওয়েবসাইটে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ইফেক্টস তৈরি করতে সহায়তা করে। আপনি সহজেই animate() মেথড ব্যবহার করে কাস্টম অ্যানিমেশন তৈরি করতে পারেন এবং CSS ট্রানজিশন ব্যবহার করে মসৃণ ট্রানজিশন প্রভাব প্রদান করতে পারেন। এই অ্যানিমেশন এবং ট্রানজিশন ওয়েব পেজের অভিজ্ঞতাকে আরও স্মুথ, দৃষ্টি আকর্ষণীয় এবং প্রাকৃতিক করে তোলে। jQueryUI এর মাধ্যমে আপনি সহজেই ওয়েবসাইটের ইন্টারফেসে ভিজ্যুয়াল ইফেক্টস যোগ করতে পারবেন যা ব্যবহারকারীদের জন্য আরও সুখকর অভিজ্ঞতা প্রদান করবে।
Read more
