MooTools-এর Fx ক্লাস একটি শক্তিশালী টুল যা জাভাস্ক্রিপ্ট দিয়ে ওয়েব পেজে সুন্দর এবং মসৃণ অ্যানিমেশন এবং ইফেক্ট তৈরি করতে সাহায্য করে। Fx ক্লাস ব্যবহার করে আপনি DOM উপাদানগুলিতে বিভিন্ন ধরনের অ্যানিমেশন এবং ইফেক্ট প্রয়োগ করতে পারেন, যেমন ফেড ইন, ফেড আউট, স্লাইড ইন, স্লাইড আউট, এবং আরও অনেক কিছু।
MooTools-এর Fx ক্লাস ইফেক্টসকে অত্যন্ত সহজ করে তোলে এবং এগুলিকে নিয়ন্ত্রণ করতে ডেভেলপারদের জন্য উন্নত ফাংশনালিটি প্রদান করে।
MooTools Fx ক্লাসের মূল বৈশিষ্ট্য
MooTools Fx ক্লাসটি ডিভ, বাটন, ইমেজ, অথবা যেকোনো HTML উপাদানকে অ্যানিমেট করতে সাহায্য করে। এটি বিভিন্ন প্রপার্টি যেমন স্টাইল, পজিশন, কালার ইত্যাদির পরিবর্তন অ্যানিমেট করতে সক্ষম।
Fx ক্লাসের ব্যবহার
MooTools-এ Fx ক্লাস ব্যবহার করার জন্য প্রথমে আপনাকে Fx এর একটি ইন্সট্যান্স তৈরি করতে হবে, তারপর আপনি বিভিন্ন মেথড ব্যবহার করে অ্যানিমেশন শুরু করতে পারেন।
১. Fx.Tween — টুইনিং অ্যানিমেশন
Fx.Tween ব্যবহার করে আপনি একাধিক স্টাইল প্রপার্টি অ্যানিমেট করতে পারেন, যেমন এলিমেন্টের উচ্চতা, প্রস্থ, ইত্যাদি।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx Tween Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Tween ইন্সট্যান্স তৈরি
var element = $('myElement');
var fx = new Fx.Tween(element);
// অ্যানিমেশন শুরু করা
fx.start('width', 200); // এলিমেন্টের প্রস্থ ২০০px হবে
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>
এখানে, Fx.Tween ক্লাস ব্যবহার করে myElement নামক ডিভের প্রস্থ অ্যানিমেট করা হয়েছে। fx.start('width', 200) কোডটি এলিমেন্টের প্রস্থ ২০০ পিক্সেলে অ্যানিমেট করবে।
২. Fx.Fade — ফেড ইন এবং ফেড আউট
Fx.Fade ক্লাস ব্যবহার করে আপনি একটি এলিমেন্টের অপাসিটি পরিবর্তন করতে পারেন, যা ফেড ইন এবং ফেড আউট ইফেক্ট তৈরি করতে সহায়তা করে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx Fade Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Fade ইন্সট্যান্স তৈরি
var element = $('myElement');
var fx = new Fx.Fade(element);
// ফেড আউট অ্যানিমেশন
fx.fade('out');
// ২ সেকেন্ড পরে ফেড ইন অ্যানিমেশন
setTimeout(function() {
fx.fade('in');
}, 2000);
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: blue;"></div>
</body>
</html>
এখানে, Fx.Fade ব্যবহার করে এলিমেন্টের ফেড আউট এবং পরে ফেড ইন অ্যানিমেশন করা হয়েছে। প্রথমে এলিমেন্টটি ফেড আউট হবে, এরপর ২ সেকেন্ড পরে ফেড ইন হবে।
৩. Fx.Slide — স্লাইড ইন এবং স্লাইড আউট
Fx.Slide ক্লাস ব্যবহার করে আপনি একটি এলিমেন্টকে উপরের বা নিচে স্লাইড করতে পারেন। এটি সাধারণত প্যানেল বা মেনু স্লাইড করতে ব্যবহৃত হয়।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx Slide Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Slide ইন্সট্যান্স তৈরি
var element = $('myElement');
var fx = new Fx.Slide(element);
// স্লাইড আউট অ্যানিমেশন
fx.slideOut();
// ২ সেকেন্ড পরে স্লাইড ইন অ্যানিমেশন
setTimeout(function() {
fx.slideIn();
}, 2000);
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: green;"></div>
</body>
</html>
এখানে, Fx.Slide ব্যবহার করে একটি এলিমেন্টকে স্লাইড আউট এবং পরে স্লাইড ইন করা হয়েছে।
৪. Fx.Morph — মাল্টিপল প্রপার্টি অ্যানিমেশন
Fx.Morph ক্লাস ব্যবহার করে একাধিক স্টাইল প্রপার্টি একসাথে অ্যানিমেট করা যেতে পারে। এটি অনেক শক্তিশালী এবং ফ্লেক্সিবল অ্যানিমেশন তৈরি করতে সহায়তা করে।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx Morph Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
// Fx.Morph ইন্সট্যান্স তৈরি
var element = $('myElement');
var fx = new Fx.Morph(element);
// একাধিক প্রপার্টি অ্যানিমেট করা
fx.start({
'width': 300,
'height': 300,
'background-color': 'orange'
});
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: red;"></div>
</body>
</html>
এখানে, Fx.Morph ব্যবহার করে একটি এলিমেন্টের প্রস্থ, উচ্চতা, এবং ব্যাকগ্রাউন্ড রঙ একসাথে পরিবর্তন করা হয়েছে।
MooTools Fx ক্লাসের অন্যান্য ফিচার
- ইফেক্ট ডেলেই:
delay()মেথড ব্যবহার করে ইফেক্টের শুরুতে একটি বিলম্ব যোগ করা যায়। - ইফেক্ট ট্যাম্বলিং: আপনি বিভিন্ন অ্যানিমেশন একসাথে চেইন করতে পারেন।
- ডিফল্ট ইফেক্ট সময়:
duration()মেথড দিয়ে প্রতিটি অ্যানিমেশনের সময় নির্ধারণ করতে পারবেন।
সারাংশ
MooTools-এর Fx ক্লাস একটি শক্তিশালী টুল যা আপনার ওয়েব পেজে আকর্ষণীয় অ্যানিমেশন এবং ইফেক্ট তৈরি করতে সহায়তা করে। এর মাধ্যমে আপনি ফেড, স্লাইড, টুইনিং, এবং মাল্টিপল প্রপার্টি অ্যানিমেশন করতে পারেন। MooTools-এর Fx ক্লাসের মাধ্যমে আপনি আপনার ওয়েব পেজে ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে পারবেন।
MooTools এর Fx ক্লাস ওয়েব পেজে এলিমেন্ট ম্যানিপুলেশন এবং অ্যানিমেশন তৈরি করতে ব্যবহৃত হয়। এই ক্লাসটি DOM এলিমেন্টগুলির স্টাইল, পজিশন, সাইজ, এবং অন্যান্য প্রপার্টি ম্যানিপুলেট করার জন্য অনেক শক্তিশালী ফাংশন প্রদান করে। এর মাধ্যমে আপনি এলিমেন্টগুলোকে স্লাইড, ফেড, স্কেল, রোটেট বা মুভ করতে পারেন।
MooTools-এর Fx ক্লাস একাধিক উপায়ে ব্যবহার করা যেতে পারে এবং এর সাহায্যে ওয়েব পেজে ডাইনামিক ইফেক্ট তৈরি করা যায় যা ইউজার ইন্টারফেসকে আরও আকর্ষণীয় করে তোলে।
Fx ক্লাসের মূল বৈশিষ্ট্য
- Morphing: এলিমেন্টের সাইজ, স্টাইল বা পজিশন পরিবর্তন করা।
- Fading: এলিমেন্টের দৃশ্যমানতা পরিবর্তন (ফেড ইন এবং ফেড আউট)।
- Sliding: এলিমেন্টকে স্লাইড ইন এবং স্লাইড আউট করা।
- Animating: এলিমেন্টে বিভিন্ন প্রপার্টি যেমন পজিশন, সাইজ ইত্যাদি অ্যানিমেট করা।
1. Fx ক্লাস ব্যবহার করে Element Morphing
Fx.Morph ক্লাস ব্যবহার করে এলিমেন্টের সাইজ, পজিশন, এবং অন্যান্য স্টাইল অ্যানিমেট করা যায়। এটি একটি খুবই শক্তিশালী টুল যা বিভিন্ন CSS প্রপার্টি নিয়ে কাজ করে।
উদাহরণ: এলিমেন্টের সাইজ পরিবর্তন
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টের সাইজ পরিবর্তন করা (Morph)
var fx = new Fx.Morph(element, {
duration: 1000, // অ্যানিমেশন ডিউরেশন 1 সেকেন্ড
transition: 'sine:inOut' // অ্যানিমেশন ট্রানজিশন টাইপ
});
fx.start({
'width': [100, 400], // বর্তমান width থেকে নতুন width পর্যন্ত অ্যানিমেশন
'height': [100, 200] // বর্তমান height থেকে নতুন height পর্যন্ত অ্যানিমেশন
});
});
এখানে, Fx.Morph ক্লাস ব্যবহার করে এলিমেন্টের width এবং height অ্যানিমেট করা হয়েছে। প্রথমে এলিমেন্টের সাইজ 100px ছিল, এবং এটি ধীরে ধীরে 400px width এবং 200px height এ পরিবর্তিত হবে।
2. Fx ক্লাস ব্যবহার করে Fading (ফেডিং) ইফেক্ট
ফেডিং ইফেক্টের মাধ্যমে আপনি একটি এলিমেন্টের দৃশ্যমানতা পরিবর্তন করতে পারেন। MooTools-এর Fx.Fade ক্লাস এটি করতে সহায়তা করে। আপনি এলিমেন্টটিকে ধীরে ধীরে অদৃশ্য (ফেড আউট) বা দৃশ্যমান (ফেড ইন) করতে পারেন।
উদাহরণ: ফেড ইন
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টকে ফেড ইন করা
var fx = new Fx.Fade(element, {
duration: 2000, // অ্যানিমেশন ডিউরেশন 2 সেকেন্ড
transition: 'linear' // অ্যানিমেশন ট্রানজিশন টাইপ
});
fx.in(); // ফেড ইন ইফেক্ট
});
এখানে, Fx.Fade ক্লাস ব্যবহার করে এলিমেন্টটিকে ধীরে ধীরে দৃশ্যমান (ফেড ইন) করা হয়েছে।
উদাহরণ: ফেড আউট
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টকে ফেড আউট করা
var fx = new Fx.Fade(element, {
duration: 1500 // অ্যানিমেশন ডিউরেশন 1.5 সেকেন্ড
});
fx.out(); // ফেড আউট ইফেক্ট
});
এখানে, Fx.Fade ক্লাস ব্যবহার করে এলিমেন্টটিকে ধীরে ধীরে অদৃশ্য (ফেড আউট) করা হয়েছে।
3. Fx ক্লাস ব্যবহার করে Sliding (স্লাইডিং) ইফেক্ট
MooTools এর Fx.Slide ক্লাস ব্যবহার করে এলিমেন্টের পজিশন স্লাইড ইন এবং স্লাইড আউট করা যেতে পারে।
উদাহরণ: স্লাইড ইন
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টটিকে স্লাইড ইন করা
var fx = new Fx.Slide(element, {
duration: 1000, // অ্যানিমেশন ডিউরেশন 1 সেকেন্ড
transition: 'bounce:out' // স্লাইড ট্রানজিশন
});
fx.slideIn(); // স্লাইড ইন ইফেক্ট
});
এখানে, Fx.Slide ক্লাস ব্যবহার করে এলিমেন্টটিকে স্লাইড ইন করা হয়েছে।
উদাহরণ: স্লাইড আউট
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টটিকে স্লাইড আউট করা
var fx = new Fx.Slide(element, {
duration: 1500 // অ্যানিমেশন ডিউরেশন 1.5 সেকেন্ড
});
fx.slideOut(); // স্লাইড আউট ইফেক্ট
});
এখানে, Fx.Slide ক্লাস ব্যবহার করে এলিমেন্টটিকে স্লাইড আউট করা হয়েছে।
4. Fx ক্লাস ব্যবহার করে Scaling (স্কেলিং) ইফেক্ট
Fx.Scale ক্লাস দিয়ে আপনি একটি এলিমেন্টের সাইজকে স্কেল (বড় বা ছোট) করতে পারেন।
উদাহরণ: স্কেল ইন
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টকে স্কেল ইন করা
var fx = new Fx.Scale(element, {
duration: 1200 // অ্যানিমেশন ডিউরেশন 1.2 সেকেন্ড
});
fx.to(1); // স্কেল ইন (বড় করা)
});
উদাহরণ: স্কেল আউট
window.addEvent('domready', function() {
var element = document.id('myElement');
// এলিমেন্টকে স্কেল আউট করা
var fx = new Fx.Scale(element, {
duration: 1200 // অ্যানিমেশন ডিউরেশন 1.2 সেকেন্ড
});
fx.to(0); // স্কেল আউট (ছোট করা)
});
এখানে, Fx.Scale ক্লাস ব্যবহার করে এলিমেন্টের সাইজ বড় বা ছোট করা হচ্ছে।
5. Fx ক্লাসের অন্যান্য ফিচার
Fx.Tween: নির্দিষ্ট CSS প্রপার্টি অ্যানিমেট করার জন্য ব্যবহার করা হয়।Fx.Scroll: পেজ স্ক্রল অ্যানিমেট করার জন্য ব্যবহার করা হয়।
সারাংশ
MooTools এর Fx ক্লাস ওয়েব পেজে এলিমেন্ট ম্যানিপুলেশন এবং অ্যানিমেশন তৈরি করার জন্য একটি শক্তিশালী টুল। Fx.Morph, Fx.Fade, Fx.Slide, এবং Fx.Scale ক্লাসের মাধ্যমে আপনি এলিমেন্টের সাইজ, পজিশন, দৃশ্যমানতা এবং স্কেল ইফেক্ট খুব সহজেই তৈরি করতে পারেন। MooTools এর এই ক্লাস ব্যবহার করে আপনার ওয়েব পেজকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করে তোলা সম্ভব।
MooTools-এ Fx.Tween এবং Fx.Morph দুটি শক্তিশালী ক্লাস, যা CSS প্রপার্টি পরিবর্তন করতে ব্যবহৃত হয়। এই ক্লাসগুলো দিয়ে আপনি ওয়েব পেজের বিভিন্ন উপাদানের স্টাইল পরিবর্তন করতে পারেন, যেমন সাইজ, পজিশন, অপাসিটি (opacity), রঙ ইত্যাদি, সবকিছু অ্যানিমেটেড ভাবে। এগুলো ব্যবহার করে আপনি ব্যবহারকারীর জন্য মসৃণ এবং ইন্টারঅ্যাকটিভ ইফেক্ট তৈরি করতে পারবেন।
Fx.Tween
Fx.Tween একটি MooTools ক্লাস যা একটি একক CSS প্রপার্টির মান পরিবর্তন করতে সাহায্য করে। এটি সাধারণত একটি নির্দিষ্ট CSS প্রপার্টি (যেমন opacity, left, top, width, height) অ্যানিমেটেডভাবে পরিবর্তন করতে ব্যবহৃত হয়। Fx.Tween সিঙ্গেল প্রপার্টি এনিমেশন হিসেবে কাজ করে, এবং এটি একটি নির্দিষ্ট সময়ের মধ্যে প্রপার্টির মান পরিবর্তন করতে পারে।
Fx.Tween উদাহরণ: Width এবং Opacity পরিবর্তন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx.Tween Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var element = document.id('myElement');
// Width এবং Opacity অ্যানিমেট করা
var widthAnimation = new Fx.Tween(element, {
property: 'width',
duration: 1000, // 1 সেকেন্ড
transition: Fx.Transitions.Sine.easeInOut // ট্রানজিশন টাইপ
});
var opacityAnimation = new Fx.Tween(element, {
property: 'opacity',
duration: 1000,
transition: Fx.Transitions.Sine.easeInOut
});
// এনিমেশন শুরু করা
widthAnimation.start(100, 300); // Width 100px থেকে 300px হবে
opacityAnimation.start(0, 1); // Opacity 0 থেকে 1 হবে (অদৃশ্য থেকে দৃশ্যমান)
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: blue;">
এটি একটি এলিমেন্ট
</div>
</body>
</html>
এখানে:
Fx.Tweenক্লাস ব্যবহার করেwidthএবংopacityপ্রপার্টি অ্যানিমেট করা হয়েছে।start()মেথড দিয়ে প্রপার্টির পুরোনো এবং নতুন মান নির্ধারণ করা হয়েছে, এবং 1 সেকেন্ডের মধ্যে পরিবর্তন করা হবে।
Fx.Morph
Fx.Morph একটি আরও শক্তিশালী ক্লাস যা একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করতে ব্যবহৃত হয়। এটি multiple CSS properties পরিবর্তন করতে সাহায্য করে, যেমন width, height, top, left, background-color, border-radius ইত্যাদি। Fx.Morph একাধিক প্রপার্টির অ্যানিমেশন সমর্থন করে এবং এর মাধ্যমে আপনি একটি একক এলিমেন্টে অনেক ধরনের অ্যানিমেশন একযোগভাবে তৈরি করতে পারেন।
Fx.Morph উদাহরণ: একাধিক CSS প্রপার্টি পরিবর্তন
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Fx.Morph Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools.min.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var element = document.id('myElement');
// একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করা
var morphAnimation = new Fx.Morph(element, {
duration: 1000, // 1 সেকেন্ডের মধ্যে পরিবর্তন হবে
transition: Fx.Transitions.Quad.easeInOut, // ট্রানজিশন টাইপ
onComplete: function() {
console.log('Animation Complete!');
}
});
// এনিমেশন শুরু করা
morphAnimation.start({
'width': [100, 300], // Width 100px থেকে 300px হবে
'height': [100, 200], // Height 100px থেকে 200px হবে
'opacity': [0, 1], // Opacity 0 থেকে 1 হবে (অদৃশ্য থেকে দৃশ্যমান)
'background-color': ['blue', 'green'] // Background color blue থেকে green হবে
});
});
</script>
</head>
<body>
<div id="myElement" style="width: 100px; height: 100px; background-color: blue;">
এটি একটি এলিমেন্ট
</div>
</body>
</html>
এখানে:
Fx.Morphক্লাস ব্যবহার করে একাধিক CSS প্রপার্টি যেমনwidth,height,opacity, এবংbackground-colorএকসাথে অ্যানিমেট করা হয়েছে।start()মেথডে একাধিক প্রপার্টি এবং তাদের পুরোনো এবং নতুন মান নির্ধারণ করা হয়েছে।
Fx.Tween এবং Fx.Morph এর মধ্যে পার্থক্য
- Fx.Tween:
- একক CSS প্রপার্টি অ্যানিমেট করার জন্য ব্যবহৃত হয়।
- সহজ এবং দ্রুত কাস্টমাইজেবল এনিমেশন তৈরি করা যায়, যেমন শুধুমাত্র
width,height, অথবাopacityপরিবর্তন করা।
- Fx.Morph:
- একাধিক CSS প্রপার্টি একসাথে অ্যানিমেট করার জন্য ব্যবহৃত হয়।
- এটি একাধিক স্টাইল পরিবর্তন করতে সাহায্য করে এবং একটি এলিমেন্টের একাধিক দিক নিয়ন্ত্রণ করা সম্ভব হয় (যেমন সাইজ, রঙ, পজিশন ইত্যাদি)।
সারাংশ
MooTools এর Fx.Tween এবং Fx.Morph ক্লাস ব্যবহার করে CSS প্রপার্টি অ্যানিমেশন তৈরি করা খুবই সহজ। Fx.Tween একটি একক প্রপার্টির অ্যানিমেশন সমর্থন করে, এবং Fx.Morph একাধিক প্রপার্টির একযোগে অ্যানিমেশন তৈরি করতে সহায়তা করে। এদের মাধ্যমে আপনি ওয়েব পেজে ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় ইফেক্ট তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
MooTools-এ Custom Fx Effects তৈরি করা খুবই সহজ এবং আপনি নিজস্ব অ্যানিমেশন ইফেক্ট তৈরি করতে পারবেন যা আপনার ওয়েব পেজে আরও কাস্টম এবং ইন্টারঅ্যাকটিভ ফিচার যোগ করবে। MooTools-এর Fx ক্লাস আপনাকে বিভিন্ন ধরনের কাস্টম অ্যানিমেশন তৈরি করতে সাহায্য করে, যেখানে আপনি নির্দিষ্ট প্রপার্টি এবং ট্রান্সফর্মেশন যোগ করতে পারেন।
MooTools-এ Custom Fx Effects তৈরি করা
১. Fx ক্লাসের সাথে কাস্টম ইফেক্ট তৈরি
MooTools-এর Fx ক্লাসে আপনি কাস্টম ইফেক্ট তৈরি করতে Fx.Tween বা Fx.Morph ব্যবহার করতে পারেন। এগুলো আপনাকে উপাদানের প্রপার্টি পরিবর্তন করতে এবং বিভিন্ন ধরনের অ্যানিমেশন তৈরি করতে সক্ষম করে।
Fx.Tween একটি সাধারণ ফাংশন যা একটি নির্দিষ্ট প্রপার্টি বা স্টাইল অ্যানিমেট করতে ব্যবহার করা হয়। অন্যদিকে Fx.Morph একাধিক প্রপার্টির জন্য অ্যানিমেশন তৈরি করতে সাহায্য করে।
২. Fx.Tween দিয়ে কাস্টম অ্যানিমেশন
Fx.Tween ক্লাস ব্যবহার করে আপনি একটি নির্দিষ্ট CSS প্রোপার্টি পরিবর্তন করতে পারেন। উদাহরণস্বরূপ, width, height, opacity, background-color ইত্যাদি।
var element = $('elementId'); // উপাদান নির্বাচন
// `width` প্রপার্টির জন্য কাস্টম অ্যানিমেশন
var fx = new Fx.Tween(element, {
duration: 1000, // 1 সেকেন্ডের মধ্যে অ্যানিমেশন
transition: Fx.Transitions.Sine.easeInOut // অ্যানিমেশনটির গতি নির্ধারণ
});
// `width` প্রপার্টি পরিবর্তন করা
fx.start('width', [100, 500]); // 100px থেকে 500px হবে
এখানে start() ফাংশন ব্যবহার করা হয়েছে, যা width প্রপার্টির জন্য 100px থেকে 500px পর্যন্ত পরিবর্তন করবে।
৩. Fx.Morph দিয়ে একাধিক প্রপার্টি পরিবর্তন
Fx.Morph ব্যবহার করে আপনি একাধিক CSS প্রপার্টি অ্যানিমেট করতে পারেন। এটি বেশিরভাগ সময় ব্যবহার হয় যখন একাধিক প্রপার্টি পরিবর্তন করতে হয়।
var element = $('elementId'); // উপাদান নির্বাচন
// একাধিক প্রপার্টি পরিবর্তন করা
var fx = new Fx.Morph(element, {
duration: 1500, // 1.5 সেকেন্ডে অ্যানিমেশন
transition: Fx.Transitions.Bounce.easeInOut // অ্যানিমেশনের ট্রান্সিশন
});
// একাধিক প্রপার্টি পরিবর্তন
fx.start({
'width': [100, 400], // width পরিবর্তন
'height': [100, 300], // height পরিবর্তন
'opacity': [1, 0] // opacity পরিবর্তন
});
এখানে fx.start() এর মাধ্যমে একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করা হচ্ছে। এটি উপাদানের width, height এবং opacity পরিবর্তন করবে একসাথে, যা একটি সুন্দর অ্যানিমেশন তৈরি করবে।
৪. Custom Transition ব্যবহার করা
MooTools আপনাকে কাস্টম ট্রান্সিশন (ইফেক্টের গতি) তৈরির সুযোগ দেয়। এটি Fx.Transitions অ্যারে ব্যবহার করে সম্ভব। এখানে আপনি বিভিন্ন ধরনের ট্রান্সিশন নির্বাচন করতে পারেন যেমন linear, easeInOut, Bounce.easeInOut ইত্যাদি। আপনি আপনার ইচ্ছামতো ট্রান্সিশন তৈরি করতে পারেন।
var customTransition = function(pos) {
return Math.sin(pos * Math.PI / 2); // কাস্টম ট্রান্সিশন ফাংশন
};
var element = $('elementId'); // উপাদান নির্বাচন
var fx = new Fx.Tween(element, {
duration: 2000,
transition: customTransition // কাস্টম ট্রান্সিশন ব্যবহার
});
fx.start('opacity', [0, 1]); // opacity পরিবর্তন
এখানে customTransition একটি কাস্টম ট্রান্সিশন ফাংশন তৈরি করা হয়েছে, যা Math.sin() ব্যবহার করে একটি সাইন ওয়েভের মতো গতি তৈরি করে।
৫. ইভেন্টের সাথে কাস্টম ইফেক্ট সংযুক্ত করা
MooTools-এ ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি কাস্টম অ্যানিমেশন ইফেক্ট trigger করতে পারেন। যেমন, আপনি যখন কোনো বাটনে ক্লিক করবেন, তখন কাস্টম অ্যানিমেশন শুরু হবে।
var button = $('buttonId'); // বাটন নির্বাচন
var element = $('elementId'); // উপাদান নির্বাচন
button.addEvent('click', function() {
var fx = new Fx.Tween(element, {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut
});
fx.start('width', [100, 500]); // বাটনে ক্লিক করলে width পরিবর্তন হবে
});
এখানে, যখন বাটনে ক্লিক করা হবে, তখন উপাদানের width প্রপার্টি 100px থেকে 500px পর্যন্ত পরিবর্তিত হবে।
কাস্টম Fx Effects এর সুবিধা
- স্বাধীনতা: MooTools কাস্টম Fx Effects তৈরি করার মাধ্যমে আপনি সম্পূর্ণ স্বাধীনতা পাবেন এবং আপনার প্রয়োজন অনুযায়ী ইফেক্ট ডিজাইন করতে পারবেন।
- কাস্টম ট্রান্সিশন: MooTools আপনাকে কাস্টম ট্রান্সিশন তৈরি করার সুযোগ দেয়, যা ইফেক্টের গতিকে নিয়ন্ত্রণ করে এবং আপনাকে একটি ইউনিক অ্যানিমেশন তৈরি করতে সাহায্য করে।
- সহজ এক্সটেনশন: MooTools-এর
Fxক্লাসটি সহজেই এক্সটেনশন করা যায়, তাই আপনি অ্যানিমেশন ফিচারগুলোকে আরও কাস্টমাইজ করতে পারবেন।
MooTools-এর কাস্টম Fx Effects আপনাকে ওয়েব পেজে আরও ইন্টারঅ্যাকটিভ এবং সুন্দর অ্যানিমেশন তৈরি করতে সাহায্য করে। MooTools এর সহজ এবং শক্তিশালী সিনট্যাক্সের মাধ্যমে আপনি সৃজনশীল অ্যানিমেশন তৈরি করে আপনার ওয়েব ডেভেলপমেন্টের অভিজ্ঞতাকে আরও সমৃদ্ধ করতে পারবেন।
MooTools-এর Fx.Transitions ক্লাস এবং অ্যাডভান্সড অ্যানিমেশন ফিচারগুলি আপনাকে আরও কাস্টমাইজড এবং ডাইনামিক অ্যানিমেশন তৈরি করার সুযোগ দেয়। Fx.Transitions একাধিক প্রিসেট ট্রানজিশন ইফেক্ট সরবরাহ করে, যা দিয়ে আপনি অ্যানিমেশনটি আরও আকর্ষণীয় এবং বাস্তবসম্মত করতে পারেন। MooTools এর Fx.Tween, Fx.Morph, এবং অন্যান্য ফিচার দিয়ে আপনি উন্নত অ্যানিমেশন তৈরি করতে পারবেন, যা আপনার ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করবে।
Fx.Transitions
MooTools-এর Fx.Transitions ক্লাস বিভিন্ন ধরনের ট্রানজিশন ইফেক্ট প্রদান করে যা অ্যানিমেশন চলাকালীন স্লো, বাউন্স, ইASE ইত্যাদি বিভিন্ন ধরনের ট্রানজিশন তৈরি করতে সক্ষম। এই ট্রানজিশনগুলো অ্যানিমেশনের গতিপথ নিয়ন্ত্রণ করে।
১. Fx.Transitions এর ব্যবহার
MooTools বিভিন্ন প্রিসেট ট্রানজিশন ফাংশন প্রদান করে, যেমন linear, easeIn, easeOut, bounce, elastic, এবং আরও অনেক কিছু। প্রতিটি ট্রানজিশন আলাদা ভাবে অ্যানিমেশনটির গতি এবং গতিপথ পরিবর্তন করে। নিচে কিছু সাধারণ ট্রানজিশন ব্যবহার করা হয়েছে:
var element = document.id('myElement');
// ব্যবহার করা হচ্ছে easeIn ট্রানজিশন
element.set('tween', {
'transition': 'easeIn',
'duration': 1000
}).tween('opacity', 0, 1); // অপাসিটি ফেড ইন হবে
এখানে transition: 'easeIn' দ্বারা অ্যানিমেশনের শুরুতে ধীরে ধীরে গতি বাড়ানোর ইফেক্ট দেওয়া হয়েছে।
২. ট্রানজিশন অপশন সমূহ
MooTools-এ transition প্যারামিটারটি অনেক ধরনের ট্রানজিশন স্টাইল গ্রহণ করতে পারে। কিছু সাধারণ ট্রানজিশন এর মধ্যে রয়েছে:
linear: একটি সরল ও সমান গতিতে অ্যানিমেশন।easeIn: অ্যানিমেশন শুরুতে ধীরে চলে এবং শেষে দ্রুত হয়ে যায়।easeOut: অ্যানিমেশন শুরুতে দ্রুত এবং শেষে ধীরে চলে।bounce: অ্যানিমেশন শেষ হওয়ার পর বাউন্স (ঝাঁপ) ইফেক্ট হয়।elastic: অ্যানিমেশন শেষে একটি প্রসারিত বা স্ট্রেচ ইফেক্ট তৈরি হয়।
৩. কাস্টম ট্রানজিশন
MooTools আপনাকে কাস্টম ট্রানজিশনও তৈরি করতে দেয়। আপনি আপনার প্রয়োজন অনুযায়ী একটি কাস্টম ট্রানজিশন ডিফাইন করতে পারেন:
Fx.Transitions.myCustomTransition = function(p) {
return p * p * (3 - 2 * p); // একটি কাস্টম ট্রানজিশন ফাংশন
};
var element = document.id('myElement');
element.set('tween', {
'transition': 'myCustomTransition',
'duration': 1000
}).tween('opacity', 0, 1); // কাস্টম ট্রানজিশন প্রয়োগ করা হচ্ছে
এখানে myCustomTransition একটি কাস্টম ট্রানজিশন ফাংশন তৈরি করা হয়েছে, যা p প্যারামিটার ব্যবহার করে নির্ধারিত গতিপথের মাধ্যমে অ্যানিমেশন তৈরি করবে।
Advanced Animations in MooTools
MooTools-এ Advanced Animations তৈরি করতে বেশ কিছু শক্তিশালী ক্লাস এবং মেথড রয়েছে। এর মধ্যে Fx.Tween, Fx.Morph, এবং Fx.Elements ইত্যাদি ব্যবহৃত হয়। এই ফিচারগুলির মাধ্যমে আপনি কাস্টম অ্যানিমেশন তৈরি করতে পারবেন, যেখানে একাধিক প্রপার্টি একই সময়ে পরিবর্তিত হতে পারে।
১. Fx.Tween ব্যবহার করে অ্যানিমেশন
Fx.Tween ব্যবহার করে আপনি নির্দিষ্ট CSS প্রপার্টি যেমন width, height, opacity, left, top ইত্যাদি পরিবর্তন করতে পারেন।
var element = document.id('myElement');
element.set('tween', {
'transition': 'bounce',
'duration': 1500
}).tween('width', 100, 500); // 100px থেকে 500px পর্যন্ত ওয়াইড্থ অ্যানিমেট হবে
এখানে tween() ফাংশন ব্যবহার করে width প্রপার্টি পরিবর্তন করা হয়েছে এবং bounce ট্রানজিশন দিয়ে অ্যানিমেশনটি বাস্তবসম্মত করা হয়েছে।
২. Fx.Morph ব্যবহার করে একাধিক প্রপার্টি অ্যানিমেট করা
Fx.Morph ব্যবহার করে আপনি একাধিক CSS প্রপার্টি একসাথে অ্যানিমেট করতে পারবেন। এটি বিভিন্ন ধরনের প্রপার্টি যেমন color, width, height, opacity একসাথে পরিবর্তন করার জন্য ব্যবহৃত হয়।
var element = document.id('myElement');
element.morph({
'width': '300px',
'height': '300px',
'opacity': 0.5
}); // একসাথে কয়েকটি প্রপার্টি পরিবর্তন করা হচ্ছে
এখানে একসাথে width, height এবং opacity পরিবর্তন করা হয়েছে।
৩. Fx.Elements ব্যবহার করে একাধিক উপাদান অ্যানিমেট করা
Fx.Elements ব্যবহার করে আপনি একাধিক উপাদানকে একসাথে অ্যানিমেট করতে পারেন। এটি একাধিক DOM এলিমেন্টের জন্য একযোগভাবে অ্যানিমেশন প্রয়োগ করতে সহায়তা করে।
var elements = ('div.box')সিলেক্টর ব্যবহার করে একাধিকdivউপাদান সিলেক্ট করা হয়েছে এবং তাদের জন্য একসাথেopacityপরিবর্তন করা হয়েছে।MooTools এর Advanced Animations এর সুবিধা
- কাস্টম ট্রানজিশন এবং টুইনিং: MooTools আপনাকে কাস্টম ট্রানজিশন এবং টুইনিং প্রক্রিয়া তৈরি করতে সহায়তা করে, যা আপনাকে সম্পূর্ণ নিয়ন্ত্রণ দেয়।
- একাধিক প্রপার্টি একসাথে পরিবর্তন:
Fx.MorphএবংFx.Elementsব্যবহার করে একাধিক CSS প্রপার্টি একসাথে পরিবর্তন করা সম্ভব, যা জটিল অ্যানিমেশন তৈরি করতে সহায়তা করে। - বাস্তবসম্মত অ্যানিমেশন: MooTools বিভিন্ন প্রিসেট ট্রানজিশন (যেমন
bounce,elastic,easeIn) দিয়ে বাস্তবসম্মত অ্যানিমেশন তৈরি করতে সহায়ক।
MooTools-এর Fx.Transitions এবং Advanced Animations ক্লাস আপনার ওয়েব পেজের অ্যানিমেশনকে আরও আকর্ষণীয়, স্মুথ এবং ইন্টারঅ্যাকটিভ করে তুলতে সাহায্য করে। এসব ফিচার ব্যবহার করে আপনি আপনার ওয়েব পেজে উন্নত অ্যানিমেশন এবং ইফেক্ট তৈরি করতে পারেন, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করবে।
Read more
