এই নিবন্ধটি একটি CSS অ্যানিমেশনের পরে একটি জাভাস্ক্রিপ্ট ফাংশন চালানোর পদ্ধতি প্রদান করবে।
সিএসএস অ্যানিমেশন শেষ হওয়ার পরে কীভাবে জাভাস্ক্রিপ্ট চালাবেন?
জাভাস্ক্রিপ্ট প্রদান করে ' অ্যানিমেশন শুরু ' & ' অ্যানিমেটিং ” ইভেন্ট যা বিকাশকারীকে একটি জাভাস্ক্রিপ্ট ফাংশন চালাতে দেয় একবার একটি অ্যানিমেশন শুরু বা শেষ হলে। এটি ডেভেলপারদের জন্য অ্যানিমেশন শেষ হওয়ার পরে যে কোনও অপারেশন করা সত্যিই সুবিধাজনক করে তোলে। ব্যবহার করার জন্য সিনট্যাক্স ' অ্যানিমেটিং 'ঘটনাটি নিম্নরূপ:
{ এইচটিএমএল উপাদান } . AddEventListener ( 'অ্যানিমেশন' , ফাংশনের নাম ) ;
উপরে প্রদত্ত বাক্য গঠনে, ' অ্যানিমেটিং ” ইভেন্ট শ্রোতার কাছে প্রথম আর্গুমেন্ট হিসাবে প্রদান করা হয়, তারপরে অ্যানিমেশন শেষ হলে ফাংশনটি কার্যকর করা হবে। একটি ' ঘটনা শ্রোতা জাভাস্ক্রিপ্টে যখনই একটি নির্দিষ্ট ঘটনা ঘটে তখন এটিকে দেওয়া ফাংশনটি ফায়ার করে।
আসুন বুঝুন কিভাবে একজন ব্যবহারকারী একটি CSS অ্যানিমেশনের পরে একটি জাভাস্ক্রিপ্ট ফাংশন চালাতে পারে উপরে-সংজ্ঞায়িত সিনট্যাক্স ব্যবহার করে। এই প্রদর্শনীতে, একটি বাক্সকে অ্যানিমেটেড করা হয় নিচের দিকে যেতে এবং আবার উপরে আসতে চার 'সেকেন্ড। অ্যানিমেশন সম্পূর্ণ হওয়ার পরে, একটি জাভাস্ক্রিপ্ট ফাংশন ব্যবহার করে একটি বার্তা প্রদর্শিত হবে।
< html >
< শৈলী >
#myDIV {
প্রস্থ : 150px ;
উচ্চতা : 150px ;
অবস্থান : আপেক্ষিক ;
পটভূমি : হালকা সবুজ ;
}
@কীফ্রেম মুভবক্স {
0 % { শীর্ষ : 0px ; }
পঞ্চাশ % { শীর্ষ : 200px ; পটভূমি : গোলাপী ; }
100 % { শীর্ষ : 0px ; পটভূমি : হালকা সবুজ ; }
}
শৈলী >
< শরীর >
< h1 > এর পরে জাভাস্ক্রিপ্ট চলছে সিএসএস অ্যানিমেশন h1 >
< h3 > অ্যানিমেশন শুরু করতে নিচের স্কোয়ারে ক্লিক করুন h3 >
< পি আইডি = 'জন্য' >> পি >
< ডিভি আইডি = 'myDIV' অনক্লিক = 'myFunction()' >> div >
< লিপি >
const div1 = নথি getElementById ( 'myDIV' ) ;
const জন্য = নথি getElementById ( 'জন্য' ) ;
ফাংশন myFunction ( ) {
div1. শৈলী . অ্যানিমেশন = 'moveBox 6s' ;
}
div1. AddEventListener ( 'অ্যানিমেশন শুরু' , স্টার্ট ফাংশন ) ;
div1. AddEventListener ( 'অ্যানিমেশন' , শেষ ফাংশন ) ;
ফাংশন স্টার্ট ফাংশন ( ) {
জন্য innerHTML = 'অ্যানিমেশন শুরু হয়েছে...' ;
}
ফাংশন শেষ ফাংশন ( ) {
জন্য innerHTML = 'অ্যানিমেশন শেষ হয়েছে!' ;
জন্য শৈলী . রঙ = 'লাল' ;
}
লিপি >
শরীর >
html >
উপরের কোডের ব্যাখ্যা নিম্নরূপ:
- মধ্যে ' <স্টাইল> ' ট্যাগ, আইডি সহ উপাদান ' myDIV ” CSS বৈশিষ্ট্য প্রদান করা হয়.
- পরবর্তী, একটি ' কীফ্রেম 'নাম' মুভবক্স ” অ্যানিমেশনের উদ্দেশ্যে তৈরি করা হয়েছে। এর তিনটি ক্রান্তিকালীন অবস্থা রয়েছে। প্রথম রূপান্তর হবে 'থেকে 0% ' প্রতি ' পঞ্চাশ% ” তারপরে, পরবর্তী রূপান্তর হবে 'থেকে পঞ্চাশ% ' প্রতি ' 100% ”
- তারপরে, বডি ট্যাগের ভিতরে, ' h1 ' & ' h3 ' উপাদান তৈরি করা হয়।
- একটি ' 'আইডি সহ উপাদান' জন্য ' সৃষ্ট.
- একটি ' div 'আইডি সহ উপাদান' myDIV ' সৃষ্ট. এছাড়াও, 'নামক একটি ফাংশন myFunction() 'কে প্রদান করা হয়' অনক্লিক ” div উপাদানের বৈশিষ্ট্য।
- এরপর, ভিতরে '