அனிமேஷன் செய்யப்பட்ட 3D உரை விளைவை உருவாக்கவும்

உள்ளடக்கம்

• 01. HTML ஆவணத்தைத் தொடங்கவும்
• 02. காணக்கூடிய HTML உள்ளடக்கம்
• 03. CSS துவக்கம்
• 04. அனிமேஷன் கொள்கலன்
• 05. அனிமேஷன் துவக்கம்
• 06. பார்வைக்கு உயிரூட்டுக
• 07. அனிமேஷனை இறுதி செய்தல்

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

• ஊடாடும் 3D அச்சுக்கலை விளைவுகளை உருவாக்குங்கள்

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

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

01. HTML ஆவணத்தைத் தொடங்கவும்

முதல் படி HTML ஆவணத்தின் கட்டமைப்பை வரையறுப்பது. தலை மற்றும் உடல் பிரிவுகளைக் கொண்ட ஆவணத்தைத் தொடங்கும் HTML கொள்கலன் இதில் அடங்கும். தலை CS பிரிவு முதன்மையாக வெளிப்புற CSS கோப்பை ஏற்றுவதற்குப் பயன்படுத்தப்படும் போது, ​​உடல் பிரிவு படி 2 இல் உருவாக்கப்பட்ட புலப்படும் பக்க உள்ளடக்கத்தை சேமிக்கும்.

! DOCTYPE html> html> head> title> 3D உரை இயக்கம் / தலைப்பு> இணைப்பு rel = "நடைதாள்" வகை = "உரை / CSS" href = "style.css" /> / தலை> உடல்> * * ST * STEP 2 இங்கே / உடல்> / html>

02. காணக்கூடிய HTML உள்ளடக்கம்

புலப்படும் HTML உள்ளடக்கம் காணக்கூடிய உரையைக் கொண்ட ஒரு கட்டுரை கொள்கலனைக் கொண்டுள்ளது. கட்டுரை கொள்கலனின் முக்கியமான பகுதி ’தரவு-அனிமேட்’ பண்புக்கூறு ஆகும், இது காட்சி விளைவுகளைப் பயன்படுத்த CSS ஆல் குறிப்பிடப்படும். கட்டுரையின் உள்ளே உள்ள உரை உள்ளடக்கம் பக்கத்தின் முக்கிய தலைப்பு என்பதைக் குறிக்க ஒரு h1 குறிச்சொல்லிலிருந்து தயாரிக்கப்படுகிறது.

கட்டுரை தரவு- animate = "நகர்த்து"> h1> வணக்கம் அங்கே! / h1> / கட்டுரை>

03. CSS துவக்கம்

’Style.css’ என்ற புதிய கோப்பை உருவாக்கவும். முதல் அறிவுறுத்தல்கள் பக்கத்தின் HTML கொள்கலன் மற்றும் உடலை கருப்பு பின்னணியைக் கொண்டிருக்கின்றன, அத்துடன் காணக்கூடிய எல்லை இடைவெளி இல்லை. பக்கத்தில் உள்ள அனைத்து குழந்தை கூறுகளுக்கும் மரபுரிமையாக வெள்ளை இயல்புநிலை உரை வண்ணமாக அமைக்கப்பட்டுள்ளது; உரை உருவாக்கும் உள்ளடக்கத்தின் இயல்புநிலை கருப்பு நிறத்தைத் தவிர்ப்பது கண்ணுக்குத் தெரியவில்லை.

html, உடல் {பின்னணி: # 000; திணிப்பு: 0; விளிம்பு: 0; நிறம்: #fff; }

04. அனிமேஷன் கொள்கலன்

‘தரவு-அனிமேட்’ பண்புடன் குறிப்பிடப்பட்ட உள்ளடக்கக் கொள்கலன் குறிப்பிட்ட பாணிகளைக் கொண்டுள்ளது. அதன் அளவு திரையின் முழு அளவையும் vw மற்றும் vh அளவீட்டு அலகுகளைப் பயன்படுத்தி பொருந்தும் வகையில் அமைக்கப்பட்டுள்ளது, அதே போல் சற்று சுழலும். ‘MoveIn’ எனப்படும் அனிமேஷன் பயன்படுத்தப்படுகிறது, இது 20 வினாடிகள் நீடிக்கும் மற்றும் எல்லையற்ற அளவில் மீண்டும் நிகழும்.

[data-animate = "நகர்த்து"] {நிலை: உறவினர்; அகலம்: 100vw; உயரம்: 100 வி.எச்; ஒளிபுகாநிலை: 1; அனிமேஷன்: நகரும் 20 களில் எல்லையற்றது; உரை-சீரமை: மையம்; உருமாற்றம்: சுழற்று (20deg); }

05. அனிமேஷன் துவக்கம்

முந்தைய கட்டத்தில் குறிப்பிடப்பட்ட ‘moveIn’ அனிமேஷனுக்கு @keyframes ஐப் பயன்படுத்தி ஒரு வரையறை தேவைப்படுகிறது. அனிமேஷனின் 0% இல் தொடங்கும் முதல் சட்டகம் இயல்புநிலை எழுத்துரு அளவு, உரை பொருத்துதல் மற்றும் புலப்படும் நிழலை அமைக்கிறது. கூடுதலாக, உருப்படி பூஜ்ஜிய ஒளிபுகாநிலையுடன் அமைக்கப்பட்டுள்ளது, இதனால் அது ஆரம்பத்தில் கண்ணுக்கு தெரியாததாக இருக்கும் - அதாவது. பார்வைக்கு வெளியே காட்டப்படும்.

@keyframes moveIn {0% {எழுத்துரு-அளவு: 1em; இடது: 0; ஒளிபுகாநிலை: 0; உரை-நிழல்: எதுவுமில்லை; } * * * படி 6 இங்கே}

06. பார்வைக்கு உயிரூட்டுக

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

10% {ஒளிபுகாநிலை: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * படி 7 இங்கே

07. அனிமேஷனை இறுதி செய்தல்

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

80% {எழுத்துரு அளவு: 8em; இடது: -8 எம்; ஒளிபுகாநிலை: 1; } 100% {எழுத்துரு அளவு: 10em; இடது: -10 எம்; ஒளிபுகாநிலை: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

குறிப்பு: நீங்கள் எந்த திட்டத்தைத் தொடங்கினாலும், சமாளிக்கக்கூடிய மேகக்கணி சேமிப்பிடம் அவசியம் (எங்கள் வழிகாட்டி உதவும்).

இந்த கட்டுரை முதலில் படைப்பு வலை வடிவமைப்பு இதழின் வலை வடிவமைப்பாளரின் 273 இதழில் வெளியிடப்பட்டது. வெளியீடு 273 ஐ இங்கே வாங்கவும் அல்லது வலை வடிவமைப்பாளருக்கு இங்கே குழுசேரவும்.