জেকুয়েরি ইফেক্ট - এনিমেশন
জেকুয়েরি animate() মেথডের মাধ্যমে আপনি কাস্টম এনিমেশন তৈরি করতে পারেন।
জেকুয়েরি এনিমেশন - animate() মেথড
জেকুয়েরি animate() মেথডের মাধ্যমে কাস্টম এনিমেশন তৈরি করা যায়।
সিনট্যাক্স:
$(selector).animate({css},speed,callback);
এনিমেশন সেট করার জন্য আবশ্যক css প্যারামিটারটির মাধ্যমে সিএসএস প্রোপার্টি নির্ধারণ করা হয়।
animate() মেথডের মধ্যে ব্যবহৃত অতিরিক্ত speed প্যারামিটারটি কোনো এলিমেন্টের মধ্যে এনিমেশন ইফেক্টের গতি নির্ধারণ করে। এই speed প্যারমিটারটি শুধুমাত্র "slow", "fast" অথবা milliseconds ভ্যালু গ্রহণ করে।
অতিরিক্ত callback প্যারামিটারটি নিজেই একটি ফাংশন, animate() মেথডের কাজ সম্পূর্ণ হলে callback ফাংশনটি এক্সিকিউট হয়।
নিচে animate() মেথডের একটি সাধারণ উদাহরণ দেখানো হলো; যার মাধ্যমে একটি <div> এলিমেন্টকে সিএসএসের left প্রোপার্টি দ্বারা 200 পিক্সেল ভ্যালু পর্যন্ত ডানে সরানো হয়েছেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left: '200px'});
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
ফলাফল
ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এগুলোকে নড়ানো যায় না।
আপনি যদি কোনো এলিমেন্টের পজিশনকে নিজের মতো করে নড়াতে চান তবে ঐ এলিমেন্ট এর সিএসএস পজিশন প্রোপার্টির ভ্যালু অবশ্যই relative, fixed অথবা absolute এর মধ্যে যেকোনো একটি সেট করুন।
পজিশন সম্মন্ধে আরও জানতে সিএসএস পজিশন অধ্যায় ভিজিট করুন।
জেকুয়েরি animate() - একাধিক প্রোপার্টির ব্যবহার
জেকুয়েরিতে একই সাথে একের অধিক প্রোপার্টি এনিমেশন করা যায়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '200px',
opacity: '0.5',
height: '120px',
width: '120px'
});
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
ফলাফল
animate() মেথডের সাহায্যে কি সিএসএসের সকল প্রোপার্টি ম্যানিপুলেট করা সম্ভব?
হ্যাঁ, প্রায় সবগুলোই! যাইহোক, একটি গুরুত্বপূর্ন কথা মনে রাখবেন: animate() মেথডের সকল প্রোপার্টিকে অবশ্যই camelCase এ লিখতে হবে। যেমন- আপনাকে অবশ্যই font-size এর পরিবর্তে fontSize, background-color এর পরিবর্তে backgroundColor এভাবে লিখতে হবে।
যদিও জেকুয়েরির মধ্যে কালার এনিমেশন অন্তর্ভূক্ত নাই,
তারপরেও আপনি কালার এনিমেশন যুক্ত করতে চাইলে jQuery.com থেকে
কালার এনিমেশন প্লাগ-ইন ডাউনলোড করতে পারেন।
জেকুয়েরি animate() - রিলেটিভ ভ্যালুর ব্যবহার
এনিমেশনে রিলেটিভ ভ্যালুও সেট করা যায়। রিলেটিভ ভ্যালু সেট করলে প্রোপার্টির ভ্যালু এলিমেশনের চলমান ভ্যালুর উপর নির্ভরশীল হয়ে যায়। ভ্যালুর আগে += অথবা -= ব্যবহার করে এটি সম্পন্ন করা হয়ঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
left: '200px',
height: '+=120px',
width: '+=120px'
});
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
ফলাফল
জেকুয়েরি animate() - পূর্ব নির্ধারিত ভ্যালুর ব্যবহার
আপনি চাইলে প্রোপার্টির এনিমেশন ভ্যালু "show" "hide" অথবা "toggle" সেট করতে পারেন।
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({
height: 'toggle'
});
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
ফলাফল
জেকুয়েরি animate() - ধারাবাহিকতা মেনে চলে
ডিফল্টভাবে জেকুয়রি এনিমেশন ধারাবাহিকভাবে সম্পন্ন হয়।
এর অর্থ হলো আপনি যদি একের অধিক animate() মেথড ব্যবহার করেন তাহলে জেকুয়েরি এই মেথডগুলোর একটি ক্রম তৈরি করবে এবং একটির পর একটি কল করবে।
চলুন উদাহরণের সাহায্যে জেকুয়েরির এই ধারাবাহিকতার(qeue) এনিমেশন দেখিঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({height: '300px', opacity: '0.4'}, "slow");
div.animate({width: '300px', opacity: '0.8'}, "slow");
div.animate({height: '100px', opacity: '0.4'}, "slow");
div.animate({width: '100px', opacity: '0.8'}, "slow");
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
ফলাফল
নিচের উদাহরণে প্রথমে টেক্সট এর ফন্ট সাইজ এবং <div> এর প্রস্থ(width) বৃদ্ধি পাবে এবং এরপরে <div> এলিমেন্টটি উপরে সরে যাবেঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জেকুয়েরি উদাহরণ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div = $("div");
div.animate({
fontSize: '18px',
width:"150px"
}, "slow");
div.animate({left: '100px'}, "slow");
});
});
</script>
</head>
<body>
<button>এনিমেশন শুরু করুন</button>
<p>ডিফল্টভাবে সকল এইচটিএমএল এলিমেন্ট এর পজিশন স্ট্যাটিক(static) থাকে এবং এটা স্থানান্তর করা যায় না।
সঠিকভাবে পজিশন স্থানান্তরের জন্য প্রথমইে এলিমেন্টের position প্রোপার্টির ভ্যালু relative, fixed, অথবা absolute নির্ধারণ করুন।</p>
<div style="background:#34bf91;height:100px;width:100px;position:absolute;"> আমার এনিমেশন হব</div>
</body>
</html>
ফলাফল
জেকুয়েরি ইফেক্ট রেফারেন্স
জেকুয়েরি ইফেক্টের সম্পূর্ণ রেফারেন্সের জন্য আমাদের জেকুয়েরি ইফেক্ট রেফারেন্স পেজে ভিজিট করুন।