MooTools ব্যবহার করে আপনি সহজেই ইমেজে বিভিন্ন ধরনের ইফেক্ট যেমন Opacity (অপাসিটি), Scale (স্কেল), এবং Rotate (রোটেট) যোগ করতে পারেন। এটি বিশেষভাবে ওয়েব ডিজাইনে আকর্ষণীয় এবং ইন্টারঅ্যাকটিভ উপাদান তৈরি করতে ব্যবহৃত হয়। MooTools-এর Fx ক্লাস এবং Element.setStyle() মেথড ব্যবহার করে আপনি সহজে এই ধরনের ইফেক্ট যোগ করতে পারবেন।
1. Opacity ইফেক্ট (Opacity Effect)
Opacity (অপাসিটি) ইফেক্ট ব্যবহার করে আপনি একটি ইমেজের দৃশ্যমানতা (visibility) পরিবর্তন করতে পারেন। MooTools-এ Fx.Tween ক্লাসের মাধ্যমে আপনি ইমেজের অপাসিটি পরিবর্তন করতে পারেন। এটি ফেড ইন বা ফেড আউট ইফেক্ট তৈরি করতে ব্যবহৃত হয়।
উদাহরণ: Opacity (ফেড ইন এবং ফেড আউট)
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Opacity Effect</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 imgElement = document.id('myImage');
// ফেড ইন ইফেক্ট
imgElement.setStyle('opacity', 0); // প্রথমে ইমেজ অদৃশ্য
imgElement.fade('in'); // ফেড ইন ইফেক্ট
// ফেড আউট ইফেক্ট
imgElement.fade('out'); // ইমেজটিকে ধীরে ধীরে অদৃশ্য করা
});
</script>
</head>
<body>
<img id="myImage" src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
এখানে:
- প্রথমে ইমেজের অপাসিটি
0(অদৃশ্য) করা হয়েছে। - তারপর
fade('in')মেথড ব্যবহার করে ইমেজটিকে ধীরে ধীরে দৃশ্যমান করা হয়েছে। fade('out')মেথড ব্যবহার করে ইমেজটিকে ধীরে ধীরে অদৃশ্য করা হয়েছে।
2. Scale ইফেক্ট (Scale Effect)
Scale (স্কেল) ইফেক্ট ব্যবহার করে আপনি ইমেজের আকার পরিবর্তন করতে পারেন। MooTools-এ Fx.Morph ক্লাস ব্যবহার করে আপনি ইমেজের width এবং height প্রপার্টি পরিবর্তন করতে পারবেন, যা ইমেজটিকে জুম ইন বা জুম আউট করতে সাহায্য করবে।
উদাহরণ: Scale (জুম ইন এবং জুম আউট)
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Scale Effect</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 imgElement = document.id('myImage');
// জুম ইন (Scale)
imgElement.morph({
'width': '300px', // নতুন width
'height': '300px' // নতুন height
});
// জুম আউট (Scale)
imgElement.morph({
'width': '150px', // ছোট width
'height': '150px' // ছোট height
});
});
</script>
</head>
<body>
<img id="myImage" src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
এখানে:
morph()মেথড ব্যবহার করে ইমেজেরwidthএবংheightপ্রপার্টি পরিবর্তন করা হয়েছে, যা জুম ইন বা জুম আউট ইফেক্ট তৈরি করে।
3. Rotate ইফেক্ট (Rotate Effect)
Rotate (রোটেট) ইফেক্ট ব্যবহার করে আপনি ইমেজটিকে একটি নির্দিষ্ট কোণে ঘুরিয়ে ফেলতে পারেন। MooTools-এ setStyle() মেথড এবং CSS transform প্রপার্টি ব্যবহার করে আপনি ইমেজের রোটেশন তৈরি করতে পারবেন।
উদাহরণ: Rotate (রোটেট)
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Rotate Effect</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 imgElement = document.id('myImage');
// রোটেট (45 ডিগ্রী)
imgElement.setStyle('transform', 'rotate(45deg)');
});
</script>
</head>
<body>
<img id="myImage" src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
এখানে:
setStyle('transform', 'rotate(45deg)')মেথড ব্যবহার করে ইমেজটিকে 45 ডিগ্রি ঘুরানো হয়েছে।
4. মাল্টিপল ইফেক্ট একসাথে (Multiple Effects Together)
MooTools এর Fx.Morph এবং Fx.Tween ব্যবহার করে একাধিক ইফেক্ট একসাথে যোগ করা যেতে পারে, যেমন একসাথে অপাসিটি, স্কেল এবং রোটেশন পরিবর্তন করা।
উদাহরণ: একাধিক ইফেক্ট একসাথে
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<title>MooTools Multiple Effects</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 imgElement = document.id('myImage');
// একসাথে opacity, scale এবং rotate পরিবর্তন করা
imgElement.morph({
'width': '300px',
'height': '300px',
'opacity': 0.5
});
imgElement.setStyle('transform', 'rotate(180deg)');
});
</script>
</head>
<body>
<img id="myImage" src="https://via.placeholder.com/150" alt="Sample Image">
</body>
</html>
এখানে:
morph()মেথড ব্যবহার করে ইমেজেরwidth,height, এবংopacityপরিবর্তন করা হয়েছে।setStyle()মেথড ব্যবহার করে ইমেজটিকে 180 ডিগ্রি রোটেট করা হয়েছে।
সারাংশ
MooTools-এ ইমেজে ইফেক্ট যোগ করা যেমন Opacity, Scale, এবং Rotate খুবই সহজ এবং কার্যকরী। আপনি Fx.Tween, Fx.Morph, এবং setStyle() মেথড ব্যবহার করে সহজেই এই ধরনের ইফেক্ট তৈরি করতে পারেন। এসব ইফেক্ট ওয়েব পেজের ইন্টারঅ্যাকটিভিটি এবং ইউজার এক্সপেরিয়েন্স উন্নত করতে সহায়তা করে, এবং ওয়েব ডিজাইনকে আরও আকর্ষণীয় এবং ডাইনামিক করে তোলে।
Read more
