CSS அனிமேஷனுக்குப் பிறகு ஜாவாஸ்கிரிப்ட் செயல்பாட்டை இயக்குவதற்கான செயல்முறையை இந்தக் கட்டுரை வழங்கும்.
CSS அனிமேஷன் முடிந்ததும் ஜாவாஸ்கிரிப்டை இயக்குவது எப்படி?
ஜாவாஸ்கிரிப்ட் வழங்குகிறது ' அனிமேஷன் தொடக்கம் ” &” உயிரூட்டும் ” அனிமேஷன் தொடங்கும் போது அல்லது முடிவடைந்தவுடன், ஜாவாஸ்கிரிப்ட் செயல்பாட்டை டெவலப்பர் இயக்க அனுமதிக்கும் நிகழ்வுகள். அனிமேஷன் முடிந்ததும் டெவலப்பர்கள் எந்தச் செயலையும் செய்ய இது மிகவும் வசதியாக இருக்கும். பயன்படுத்துவதற்கான தொடரியல் ' உயிரூட்டும் 'நிகழ்வு பின்வருமாறு:
{ HTML உறுப்பு } . addEventListener ( 'அனிமேஷன்' , செயல்பாடு பெயர் ) ;
மேலே வழங்கப்பட்ட தொடரியலில், ' உயிரூட்டும் ” நிகழ்வு கேட்பவருக்கு முதல் வாதமாக வழங்கப்படுகிறது, அதைத் தொடர்ந்து அனிமேஷன் முடிந்ததும் செயல்படுத்தப்படும். ஒரு ' நிகழ்வு கேட்பவர் ” ஜாவாஸ்கிரிப்டில் ஒரு குறிப்பிட்ட நிகழ்வு நடக்கும் போதெல்லாம் அதற்கு கொடுக்கப்பட்ட செயல்பாட்டை செயல்படுத்துகிறது.
மேலே வரையறுக்கப்பட்ட தொடரியல் பயன்படுத்தி ஒரு CSS அனிமேஷனுக்குப் பிறகு ஒரு பயனர் JavaScript செயல்பாட்டை எவ்வாறு இயக்க முடியும் என்பதைப் புரிந்துகொள்வோம். இந்த ஆர்ப்பாட்டத்தில், ஒரு பெட்டி கீழே நகர்ந்து மீண்டும் மேலே வர அனிமேஷன் செய்யப்படுகிறது ' நான்கு ” வினாடிகள். அனிமேஷன் முடிந்ததும், ஜாவாஸ்கிரிப்ட் செயல்பாட்டைப் பயன்படுத்தி ஒரு செய்தி காட்டப்படும்.
< html >
< பாணி >
#myDIV {
அகலம் : 150px ;
உயரம் : 150px ;
நிலை : உறவினர் ;
பின்னணி : வெளிர் பச்சை ;
}
@keyframes மூவ்பாக்ஸ் {
0 % { மேல் : 0px ; }
ஐம்பது % { மேல் : 200px ; பின்னணி : இளஞ்சிவப்பு ; }
100 % { மேல் : 0px ; பின்னணி : வெளிர் பச்சை ; }
}
பாணி >
< உடல் >
< h1 > பிறகு ஜாவாஸ்கிரிப்டை இயக்குகிறது CSS இயங்குபடம் h1 >
< h3 > அனிமேஷனைத் தொடங்க கீழே உள்ள சதுரத்தில் கிளிக் செய்யவும் h3 >
< p id = 'அதற்காக' > ப >
< div ஐடி = 'myDIV' கிளிக் செய்யவும் = 'myFunction()' > div >
< கையால் எழுதப்பட்ட தாள் >
நிலையான div1 = ஆவணம். getElementById ( 'myDIV' ) ;
நிலையான க்கான = ஆவணம். getElementById ( 'அதற்காக' ) ;
செயல்பாடு myFunction ( ) {
div1. பாணி . இயங்குபடம் = 'moveBox 6s' ;
}
div1. addEventListener ( 'அனிமேஷன் ஸ்டார்ட்' , தொடக்கச் செயல்பாடு ) ;
div1. addEventListener ( 'அனிமேஷன்' , endFunction ) ;
செயல்பாடு தொடக்க செயல்பாடு ( ) {
க்கான. உள் HTML = 'அனிமேஷன் தொடங்கிவிட்டது...' ;
}
செயல்பாடு endFunction ( ) {
க்கான. உள் HTML = 'அனிமேஷன் முடிந்தது!' ;
க்கான. பாணி . நிறம் = 'சிவப்பு' ;
}
கையால் எழுதப்பட்ட தாள் >
உடல் >
html >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- இல் ' <பாணி> 'குறிச்சொற்கள், ஐடியுடன் கூடிய உறுப்பு' myDIV ” CSS பண்புகளுடன் வழங்கப்படுகிறது.
- அடுத்து, ஒரு ' விசைச்சட்டம் 'பெயர்' மூவ்பாக்ஸ் ” என்பது அனிமேஷன் நோக்கங்களுக்காக உருவாக்கப்பட்டது. இது மூன்று இடைநிலை நிலைகளைக் கொண்டுள்ளது. முதல் மாற்றம் ' 0% ” முதல் ” ஐம்பது% ”. பின்னர், அடுத்த மாற்றம் ' ஐம்பது% ” முதல் ” 100% ”.
- பின்னர், உடலின் குறிச்சொற்களுக்குள், ' h1 ” &” h3 ” கூறுகள் உருவாக்கப்படுகின்றன.
- ஒரு ' 'ஐடியுடன் கூடிய உறுப்பு' க்கான ” உருவாக்கப்பட்டது.
- ஒரு ' div 'ஐடியுடன் கூடிய உறுப்பு' myDIV ” உருவாக்கப்பட்டது. மேலும், '' என்ற ஒரு செயல்பாடு myFunction() 'க்கு வழங்கப்படுகிறது' கிளிக் செய்யவும் 'டிவ் உறுப்பின் பண்பு.
- அடுத்து, உள்ளே '