MooTools লাইব্রেরি অনেক ধরনের ইফেক্ট সরবরাহ করে, যার মধ্যে Element Hide/Show এবং Fade In/Out অন্যতম। এই ইফেক্টগুলো ওয়েব পেজে ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স (UX) উন্নত করতে সাহায্য করে। MooTools এ hide(), show(), fade() ইত্যাদি ফাংশন ব্যবহার করে খুব সহজেই এসব ইফেক্ট প্রয়োগ করা যায়।
Element Hide/Show
MooTools-এ একটি এলিমেন্টকে Hide বা Show করতে খুব সহজ। এর জন্য hide() এবং show() মেথড ব্যবহার করা হয়।
এলিমেন্ট হাইড করা (Hide)
window.addEvent('domready', function() {
var element = document.id('myElement');
element.hide(); // এলিমেন্টটি হাইড করবে
});
এখানে element.hide() ফাংশনটি myElement নামক এলিমেন্টটি হাইড করবে। এই মেথডটি এলিমেন্টের display প্রপার্টি পরিবর্তন করে এবং এটি দেখানো বন্ধ করে।
এলিমেন্ট শো করা (Show)
window.addEvent('domready', function() {
var element = document.id('myElement');
element.show(); // এলিমেন্টটি দেখাবে
});
এখানে element.show() ফাংশনটি myElement এলিমেন্টটি আবার দৃশ্যমান করবে।
Fade In/Out ইফেক্ট
MooTools-এ Fade In এবং Fade Out ইফেক্ট ব্যবহার করে এলিমেন্টের দৃশ্যমানতা ধীরে ধীরে পরিবর্তন করা যায়। এই ইফেক্টের জন্য fade() মেথড ব্যবহার করা হয়। এটি একটি সুন্দর অ্যানিমেশন তৈরি করে, যা ওয়েব পেজে ইন্টারঅ্যাকটিভ অনুভূতি যোগ করে।
Fade In
window.addEvent('domready', function() {
var element = document.id('myElement');
element.setStyle('opacity', 0); // প্রথমে এলিমেন্টের opacity শূন্য করা
element.fade('in'); // ধীরে ধীরে এলিমেন্টটিকে ফেড ইন করবে
});
এখানে প্রথমে setStyle('opacity', 0) ফাংশনটি দিয়ে এলিমেন্টের অপাসিটি শূন্য করা হয়েছে এবং পরে fade('in') ফাংশনটি ব্যবহার করে এলিমেন্টটিকে ধীরে ধীরে দৃশ্যমান করা হয়েছে।
Fade Out
window.addEvent('domready', function() {
var element = document.id('myElement');
element.fade('out'); // ধীরে ধীরে এলিমেন্টটিকে ফেড আউট করবে
});
এখানে fade('out') ফাংশনটি ব্যবহার করা হয়েছে, যার মাধ্যমে এলিমেন্টটি ধীরে ধীরে অদৃশ্য হয়ে যাবে।
Fade In/Out এর জন্য কাস্টম ডিউরেশন
MooTools এর fade() মেথডে আপনি কাস্টম সময়কাল (duration) নির্ধারণ করতে পারেন। এটি আপনাকে ইফেক্টটি ধীরে বা দ্রুত প্রয়োগ করতে সহায়তা করে।
কাস্টম ডিউরেশন সহ Fade In
window.addEvent('domready', function() {
var element = document.id('myElement');
element.setStyle('opacity', 0);
element.fade({'duration': 1500, 'transition': 'linear'}); // 1.5 সেকেন্ডে ফেড ইন হবে
});
এখানে duration: 1500 দিয়ে ইফেক্টটির সময়কাল 1500 মিলিসেকেন্ড (1.5 সেকেন্ড) নির্ধারণ করা হয়েছে। transition: 'linear' দিয়ে ইফেক্টের ট্রানজিশন টাইপ নির্ধারণ করা হয়েছে।
কাস্টম ডিউরেশন সহ Fade Out
window.addEvent('domready', function() {
var element = document.id('myElement');
element.fade({'duration': 2000, 'transition': 'bounce'}); // 2 সেকেন্ডে ফেড আউট হবে
});
এখানে duration: 2000 দিয়ে ইফেক্টটির সময়কাল 2000 মিলিসেকেন্ড (2 সেকেন্ড) নির্ধারণ করা হয়েছে, এবং transition: 'bounce' ব্যবহার করা হয়েছে, যা একটি বাউন্সিং ট্রানজিশন তৈরি করবে।
সারাংশ
MooTools-এ Element Hide/Show এবং Fade In/Out ইফেক্টগুলোর মাধ্যমে ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স উন্নত করা সম্ভব। hide() এবং show() মেথড দ্বারা এলিমেন্টকে গোপন বা প্রদর্শন করা যায়, এবং fade() মেথডের মাধ্যমে ধীরে ধীরে এলিমেন্টের দৃশ্যমানতা পরিবর্তন করা যায়। এই ইফেক্টগুলো কাস্টম সময়কাল ও ট্রানজিশন সেট করে আরও আকর্ষণীয় করা যেতে পারে। MooTools এর এই ইফেক্টগুলো ওয়েব পেজকে আরো প্রাণবন্ত এবং ইন্টারঅ্যাকটিভ করে তোলে।
Read more
