CSS அனிமேஷன் எடுத்துக்காட்டுகள்

அனிமேஷன் உலகம் ஒவ்வொரு நாளும் அதிகமாக உள்ளது, விரிவான வீடியோ பதிப்புகளை உருவாக்க எங்களுக்கு உதவும் பல திட்டங்கள் உள்ளன. உங்களுக்கு இன்னும் CSS தெரியாவிட்டால், அதை நீங்கள் தெரிந்துகொள்ளவும், செய்யக்கூடிய அனைத்தையும் கண்டறியவும் நேரம் வந்துவிட்டது.

ஆனால் நாங்கள் விவரிக்க விரும்பாததால், அனிமேஷன்கள் நிறைந்த ஒரு இடுகையை நாங்கள் உங்களுக்குக் கொண்டு வருகிறோம், அவற்றில் பல ஒரு குறிப்பிட்ட செயல்பாட்டைச் செய்கின்றன, மற்றவை வெறுமனே மகிழ்விக்கவும் வேடிக்கையாகவும் வடிவமைக்கப்பட்டுள்ளன. இந்த இடுகையில், சில சிறந்த CSS அனிமேஷன்களைக் காட்டுகிறோம் மேலும், வடிவமைப்பாளர் அல்லது அனிமேஷன் வடிவமைப்பாளராக உங்கள் பயணத்தைத் தொடரக்கூடிய ஆர்வமுள்ள பிற திட்டங்களை நாங்கள் உங்களுக்குக் காண்பிக்கிறோம்.

CSS ஐ

CSS என்பது ஒரு என வரையறுக்கப்படுகிறது வலைப்பக்க வடிவமைப்புத் துறையில் பொதுவாகப் பயன்படுத்தப்படும் வள வகை. அதாவது, இது சில செயல்பாடுகளை நிறைவேற்ற வடிவமைக்கப்பட்ட குறியீடுகளின் தொடர். HTML என்ற சொல் உங்களுக்குத் தெரிந்தால், CSS என்ற சொல்லை நீங்கள் நிச்சயமாக அறிவீர்கள், ஏனென்றால் அவை கைகோர்த்துச் செல்கின்றன, மேலும் பல இணைய வளங்களை உருவாக்குவதற்கும் மேம்படுத்துவதற்கும் இரண்டு அடிப்படைத் தூண்கள்.

நீங்கள் நன்றாகப் புரிந்துகொள்வதற்கு, ஏற்கனவே வடிவமைக்கப்பட்ட டெம்ப்ளேட்டுகள் உள்ளன, அவற்றைத் திருத்தத் தொடங்கலாம் மற்றும் உங்கள் சொந்த வலைப்பக்கத்தை உருவாக்கலாம். ஆனால் நீங்கள் விரும்பினால் இணைப்பு முகவரிகள் அல்லது உங்கள் பக்கத்தின் இணைப்பை மாற்ற வேண்டும் என்றால், ஒவ்வொரு புரோகிராமரும் தெரிந்து கொள்ள வேண்டிய சில குறியீடுகளைப் பயன்படுத்துவது அவசியம்.

பொதுவான பண்புகள்

• முதல் பார்வையில் HTML மற்றும் CSS ஆகியவை ஒரே மாதிரியானவை என்று தோன்றினாலும், அவை இல்லை. HTML மூலம், உங்கள் வலைப்பக்கத்திலிருந்து உங்களுக்குத் தேவையான அல்லது விரும்பும் தகவலை நீங்கள் திருப்பிவிடலாம் மற்றும் விநியோகிக்கலாம். மறுபுறம், CSS உடன், நீங்கள் வடிவமைக்கும் ஒவ்வொரு பக்கத்தின் வரிசையையும் நீங்கள் அனுமதிக்கிறீர்கள். என்அல்லது அவை ஒன்றுதான் ஆனால் மேலே குறிப்பிட்டுள்ளபடி, இரண்டுமே இணையப் பக்கங்களின் வளர்ச்சியில் இரண்டு அடிப்படைத் தூண்கள்.
• CSS இன் சிறப்பியல்பு என்னவென்றால், இது பல உலாவிகளில் பயன்படுத்தப்படலாம், அதில் நிறுவப்பட்ட வடிவங்கள் எதுவும் இல்லை, ஆனால் அதன் மொழி உலகளாவியது மற்றும் கிடைக்கக்கூடிய அனைத்து சாதனங்களுக்கும் ஏற்றது. எந்த வகையான நீட்டிப்பும் தேவையில்லை என்பதால் இது வேலையை எளிதாக்குகிறது.
• மேலும் குறிப்பிடப்பட்டுள்ளபடி, நீங்கள் என்ன வடிவமைக்க விரும்பினால் இது ஒரு நல்ல கருவியாகும் இந்த வழியில் உங்கள் வலைப்பக்கத்தின் இடைமுகத்தின் எந்த அம்சத்தையும் மாற்றலாம் அல்லது மாற்றலாம். இது எழுத்துருக்கள் மற்றும் டோன்கள் இரண்டிலிருந்தும் பெறப்பட்டது, அதாவது, உங்களுக்கு பரந்த அளவிலான சாத்தியங்கள் உள்ளன.
• இது கையாள எளிதானது மற்றும் இந்த வகை வடிவமைப்பை உருவாக்கும் உலகத்துடன் தொடங்குவதற்கு முன்பே நிறுவப்பட்ட குறியீடுகள் உள்ளன, இதற்கு பல ஆண்டுகள் பயிற்சி தேவை, ஆனால் CSS இது உங்கள் முதல் அனிமேஷனை உருவாக்கக்கூடிய ஆரம்ப தளத்தைக் கொண்டுள்ளது மற்றும் ஒரு தொழில்முறை வலைப்பக்க வடிவமைப்பாளராக உணர்கிறேன். கூடுதலாக, இது அவர்களின் முதல் திட்டங்களை உருவாக்கத் தொடங்க விரும்பும் அனைவருக்கும் திறந்திருக்கும் ஒரு அமைப்பாகும். சுருக்கமாக, நீங்கள் தேடுவது டெம்ப்ளேட் அல்லது ஒரு தானியங்கி வலைப்பக்கத்தை உருவாக்குவதற்கு அப்பால் செல்ல வேண்டும் என்றால், CSS மூலம் உங்கள் சாகசத்தைத் தொடங்கலாம்.

அனிமேஷன் எடுத்துக்காட்டுகள்

பன்னிருமுகி

Dodecahedron என்பது அனிமேட்டர் Wontem ஆல் உருவாக்கப்பட்ட ஒரு அனிமேஷன் ஆகும். அனிமேஷன் முற்றிலும் CSS மூலம் உருவாக்கப்படுவதை அடிப்படையாகக் கொண்டது சுழலும் டோடெகாஹெட்ரானின் வடிவமைப்பு அதன் ஒளிர்வை வலுப்படுத்தும் இருண்ட பின்னணியில் காட்டப்பட்டுள்ளது. கணக்கில் எடுத்துக்கொள்ள வேண்டிய மற்றொரு விவரம் படத்தில் பயன்படுத்தப்பட்ட விளைவுகள்.

இந்த அனிமேஷனின் சிறப்பியல்பு என்னவென்றால், இது ஒரு முப்பரிமாண வடிவமைப்பாக இருக்கும் ஒரு குறிப்பிட்ட போக்கைக் கொண்டுள்ளது, இது இன்னும் சுவாரஸ்யமானது. நீங்கள் விரும்புவது 3D உலகமாக இருந்தால் மற்றும் பொருட்களின் அளவுடன் விளையாடுவது சந்தேகத்திற்கு இடமின்றி ஒரு சிறந்த அனிமேஷன் ஆகும்.

அனிமேஷன் பூதம்

இந்த அனிமேஷன் அனிமேஷன் பூதம் என்று பெயரிடப்பட்டுள்ளது மற்றும் வடிவமைப்பாளர் அவாஸ் போகீவ் என்பவரால் உருவாக்கப்பட்டது, சந்தேகத்திற்கு இடமின்றி இது ஒரு சிறிய வரிசையாகும், அங்கு வீடியோ கேம் சகாப்தத்தின் நட்சத்திர கதாநாயகர்களில் ஒருவரான மரியோ பிரதர்ஸ்.

இது திசை இயக்கத்துடன் விளையாடுவதால் ஸ்டாப்-மோஷன் எனப்படும் அனிமேஷன் பாணியாகும் குறுகிய காட்சிகள் மூலம். சந்தேகத்திற்கு இடமின்றி, இது ஒரு நட்சத்திர அனிமேஷன் ஆகும், நீங்கள் மரியோ பிரதர்ஸின் காதலராக இருந்தால், இது CSS இல் உருவாக்கப்பட்ட சிறந்த அனிமேஷன்களில் ஒன்றாகும்.

புகைப்பட கேமரா

இந்த சிறந்த அனிமேஷனில் அனிமேஷன் செய்யப்பட்ட புகைப்பட கேமரா உள்ளது. இது டாமியம் பெரேரா மற்றும் உருவாக்கிய அனிமேஷன் ஒரு படத்தைப் படம்பிடிப்பதை உருவகப்படுத்த கேமராவை அனுமதிக்கிறது பொத்தானை அழுத்துவதன் மூலம். நீங்கள் புகைப்பட உலகத்தை விரும்பினால், இது ஒரு சுவாரஸ்யமான அனிமேஷன் மற்றும் உங்கள் வலைப்பக்கத்தில் இது போன்ற அனிமேஷன் பகுதி உங்களுக்குத் தேவை.

இந்த அனிமேஷனில் உள்ள சுவாரஸ்யமான விஷயம் என்னவென்றால், நீங்கள் விரும்பும் படத்தைப் போடலாம், பொத்தானை அழுத்தினால் கேமரா அதைக் காண்பிக்கும். இது CSS இல் வடிவமைக்கப்பட்ட மிகவும் ஆக்கப்பூர்வமான அனிமேஷன்களில் ஒன்றாகும் என்பதில் சந்தேகமில்லை.

நீர்வீழ்ச்சி சூரிய குடும்பம்

சூரிய குடும்பத்தைப் பற்றிய இந்த அனிமேஷன் டாடி வால்ஷ் என்பவரால் உருவாக்கப்பட்டது, இது நமது சூரிய குடும்பத்தின் சிறிய மாதிரி அல்லது உருவகப்படுத்துதலைக் காட்டுகிறது. இது ஒரு சிறந்த அனிமேஷன் ஆகும், ஏனெனில் ஒவ்வொரு கிரகமும் வெவ்வேறு வேகத்தில் எவ்வாறு நகர்கிறது என்பதை நீங்கள் பார்க்கலாம். 

இது மிகவும் யதார்த்தமான மற்றும் அற்புதமான அனிமேஷன்களில் ஒன்றாகும். நீங்கள் வானியல் உலகில் பணிபுரிந்தால் அல்லது பிரபஞ்சம் மற்றும் அதன் கிரகங்களின் ரசிகராக இருந்தால் நீங்கள் அதை சுவாரஸ்யமாகக் காணலாம். இது உறுதியானது, இது ஒரு அனிமேஷன் ஆகும், இது பரிசை சிறந்த மற்றும் ஆச்சரியமான ஒன்றாக எடுத்துக்கொள்கிறது.

ஸ்டார் வார்ஸ் அனிமேஷன்

நீங்கள் ஸ்டார் வார்ஸை விரும்பினால், டோனோவன் ஹட்சின்சன் உருவாக்கிய இந்த அனிமேஷனைத் தவறவிட முடியாது. புகழ்பெற்ற ஸ்டார் வார்ஸ் கதையின் தலைப்பின் சிறப்பு விளைவுகளுடன் கூடிய அனிமேஷன் என்பதில் சந்தேகமில்லை. இந்த அனிமேஷனைப் பற்றிய ஆச்சரியமான விஷயம் என்னவென்றால், அது வெவ்வேறு எழுத்துருக்களின் இயக்கத்துடன் எவ்வாறு விளையாடியது என்பதுதான்.

விண்மீன் திரள்கள், எல்இடி விளக்குகள், இருண்ட பின்னணிகள் மற்றும் வேலைநிறுத்தம் செய்யும் எழுத்துருக்கள்: சாகா வழங்கும் கற்பனைக் கூறுகள் ஒவ்வொன்றையும் கணக்கில் எடுத்துக்கொண்டதால், இது சந்தேகத்திற்கு இடமின்றி நட்சத்திர அனிமேஷன்களில் ஒன்றாகும்.

கூடுதலாக, இயக்க விளைவுகளும் மிகவும் வெற்றிகரமானவை மற்றும் பார்வையாளரிடமிருந்து அதிக கவனத்தை ஈர்க்கின்றன.

அனிமேஷன்களை உருவாக்குவதற்கான பயன்பாடுகள்

அடோப் ஸ்பார்க்

Adobe Spark என்பது Adobe இன் ஒரு பகுதியாகும் மற்றும் அற்புதமான அனிமேஷன்களை உருவாக்குவதற்கும், முடிவில்லாத அனிமேஷன் மற்றும் வேடிக்கையான வீடியோக்களை உருவாக்குவதற்கும் பொறுப்பான ஒரு கருவியாகும். இந்த கருவியின் கவனத்தை ஈர்க்கிறது மற்றும் சந்தேகத்திற்கு இடமின்றி அதன் சாதகமாக உள்ளது, இது மொபைல் சாதனங்கள், டேப்லெட்டுகள் மற்றும் கணினிகளுக்கு கிடைக்கிறது. மேலும், உங்கள் இணையதளத்திற்கான தரமான உள்ளடக்கத்தை உருவாக்க நீங்கள் விரும்பினால், இது சரியான கருவியாகும், ஏனெனில் அதில் ஆயிரக்கணக்கான அலங்கார டெம்ப்ளேட்டுகள் இருப்பதால் உங்கள் இடத்தைப் பார்வையிடுவதற்கு கவர்ச்சிகரமான இடமாக மாற்றலாம்.

அனிமேஷன் மேசை

நீங்கள் ஒரு இல்லஸ்ட்ரேட்டராக இருந்தால், இது நட்சத்திர பயன்பாடுகளில் ஒன்றாகும், மேலும் உங்கள் வரைபடங்களுக்கு உயிர் கொடுப்பது எப்படி என்று உங்களுக்கு இன்னும் தெரியவில்லை, இந்த கருவிக்கு நன்றி, உங்கள் கலைத் திட்டங்களுக்கு நீங்கள் ஒரு திருப்பத்தை கொடுக்க முடியும், மேலும், நீங்கள் உங்கள் ஓவியங்கள் ஒவ்வொன்றையும் அங்கேயே உருவாக்க முடியும். சரி, இது தூரிகைகள், பல்வேறு உதவிக்குறிப்புகளின் பென்சில்கள், பரந்த அளவிலான வண்ணங்களைக் கொண்டுள்ளது, மேலும் உங்கள் முதல் ஆரம்ப ஓவியங்களை உருவாக்குவதற்கான விருப்பமும் உங்களுக்கு உள்ளது, அனிமேஷன் உலகில் நீங்கள் தொடங்குவதற்கு என்ன தேவை என்பதில் சந்தேகமில்லை. உங்கள் சொந்த படைப்புகள். முயற்சி செய்து பாருங்கள் ஆசையோடு இருக்காதீர்கள்.

சின்ஃபிக் ஸ்டுடியோ

2D அனிமேஷன்களை உருவாக்குவதற்கான சிறந்த நிரல்களில் Synfig ஒன்றாகும். தூய்மையான டிஸ்னி பாணியில் அனிமேஷன் உலகை நீங்கள் விரும்பினால் இது முக்கிய கருவிகளில் ஒன்றாகும். Synfig உடன், உங்கள் வரைபடங்களுக்குப் பயன்படுத்தக்கூடிய பரந்த அளவிலான தூரிகைகள், வடிப்பான்கள் மற்றும் விளைவுகள் கூட உள்ளன.

மேலும், நீங்கள் 2டியின் ரசிகராக இருந்தால், இந்த வகை நிரலை முயற்சிப்பதற்கான வாய்ப்பை நீங்கள் தவறவிட முடியாது, ஏனெனில் இது உங்கள் விளக்கப்படங்களுக்கு இயக்கத்தையும் உயிரையும் கொடுக்கும் வாய்ப்பை வழங்குகிறது. நீங்கள் இதற்கு முன்பு திசையன்களுடன் பணிபுரிந்திருந்தால், இந்த நிரல் உங்களுக்கு வேறுபட்டதாகவோ அல்லது சிக்கலானதாகவோ இருக்காது.

பிரீமியர் புரோ

பிரீமியர் புரோ என்பது அடோப் தொகுப்பில் உள்ள மற்றொரு முக்கிய கருவியாகும். தொழில்முறை வீடியோ எடிட்டர்கள் மற்றும் பல அனிமேஷன் ஸ்டுடியோக்களால் அதிகம் பயன்படுத்தப்படும் நிரல்களில் இதுவும் ஒன்றாகும். பிரீமியர் மூலம் நீங்கள் உங்கள் முதல் அனிமேஷன்களை உருவாக்கலாம் மற்றும் அதில் உள்ள பல விளைவுகளுக்கு மத்தியில் எடுத்துச் செல்லலாம்.

கூடுதலாக, நீங்கள் ஆடியோவிஷுவல் துறையில் ஒரு தொடக்கநிலையாளராக இருந்தால், அதன் இடைமுகத்தை உங்களுக்கு அறிமுகப்படுத்த சில சிறிய பயிற்சிகள் உள்ளன, மேலும் உங்கள் கற்பனை மற்றும் உங்கள் மிகவும் ஆக்கப்பூர்வமான பக்கத்தால் உங்களை அழைத்துச் செல்ல அனுமதிக்கும்.

இது Android மற்றும் iOS இரண்டிற்கும் கிடைக்கிறது. ஒரே குறை என்னவென்றால், இது ஒரு இலவச பயன்பாடு அல்ல, அதற்கு ஒரு சிறிய செலவு தேவைப்படுகிறது.

முடிவுக்கு

CSS இல் அனிமேஷன்களை உருவாக்குவது மிகவும் எளிமையானது, நீங்கள் செய்ய வேண்டியதெல்லாம் பல ஆண்டுகளாக இந்தத் துறையில் இருப்பவர்களால் ஈர்க்கப்பட வேண்டும். நீங்கள் பார்த்தபடி, பல அனிமேஷன்கள் உள்ளன, கூடுதலாக, மிகவும் செயல்பாட்டு வளங்களைப் பயன்படுத்தும் பிற வடிவமைப்பாளர்கள் உள்ளனர், அதாவது பிரபலமான விண்டோஸ் குப்பைகளை ஒரு விமானத்தின் வடிவத்தில் டெஸ்க்டாப் முழுவதும் நகர்த்தி எதை நீக்குகிறது உனக்கு வேண்டாமா.

சுருக்கமாக, வடிவமைக்கப்பட்ட பல யோசனைகள் மற்றும் மேதைகள் உள்ளனர், ஆனால் இப்போது CSS மூலம் உங்கள் முதல் அனிமேஷனை நிரலாக்க மற்றும் மேம்படுத்துவது உங்கள் முறை.