యానిమేటెడ్ 3D టెక్స్ట్ ప్రభావాన్ని సృష్టించండి

విషయము

• 01. HTML పత్రాన్ని ప్రారంభించండి
• 02. కనిపించే HTML కంటెంట్
• 03. CSS దీక్ష
• 04. యానిమేషన్ కంటైనర్
• 05. యానిమేషన్ దీక్ష
• 06. వీక్షణలోకి యానిమేట్ చేయండి
• 07. యానిమేషన్‌ను ఖరారు చేస్తోంది

కెనడా యొక్క జామ్ 3 చేత లవ్ లాస్ట్ అందంగా కోల్పోయిన, మొబైల్-సిద్ధంగా ఉన్న ఇంటరాక్టివ్ పద్యం, కోల్పోయిన ప్రేమ చుట్టూ శాశ్వతమైన అనుభూతుల గురించి నిజమైన హృదయంతో. వెబ్‌సైట్ లేఅవుట్ దాని యానిమేషన్‌కు శక్తినిచ్చే GSAP లైబ్రరీతో HTML5 ను ఉపయోగించి నిర్మించబడింది, దాని యొక్క అత్యంత దృశ్యమాన లక్షణాలలో ఒకటి దాని యానిమేటెడ్ 3D టెక్స్ట్, ఇది లవ్ లాస్ట్ యొక్క కవిత్వాన్ని నిజంగా జీవితానికి తీసుకువస్తుంది.

• ఇంటరాక్టివ్ 3D టైపోగ్రఫీ ప్రభావాలను చేయండి

ఇది నరకం వలె ఆకట్టుకుంటుంది, మరియు ఆకర్షణీయమైన వినియోగదారు అనుభవాన్ని సృష్టించడానికి మీ స్వంత పనిలో చేర్చడం కష్టం కాదు; ఇది ఎలా జరిగిందో ఇక్కడ ఉంది.

మీ స్వంత ఆకర్షణీయమైన సైట్‌ను చేయాలనుకుంటున్నారా? వెబ్‌సైట్ బిల్డర్ సాధనాన్ని ప్రయత్నించండి మరియు సరైన వెబ్ హోస్టింగ్ సేవను ఎంచుకోవడం ద్వారా విషయాలు సజావుగా నడుస్తూ ఉండండి.

01. HTML పత్రాన్ని ప్రారంభించండి

మొదటి దశ HTML పత్రం యొక్క నిర్మాణాన్ని నిర్వచించడం. ఇది పత్రాన్ని ప్రారంభించే HTML కంటైనర్‌ను కలిగి ఉంటుంది, దీనిలో తల మరియు శరీర విభాగాలు ఉంటాయి. హెడ్ ​​విభాగం ప్రధానంగా బాహ్య CSS ఫైల్‌ను లోడ్ చేయడానికి ఉపయోగించబడుతుండగా, శరీర విభాగం 2 వ దశలో సృష్టించబడిన కనిపించే పేజీ కంటెంట్‌ను నిల్వ చేస్తుంది.

! DOCTYPE html> html> head> title> 3D టెక్స్ట్ మూవ్మెంట్ / టైటిల్> లింక్ rel = "స్టైల్షీట్" type = "text / css" href = "style.css" /> / head> body> * * ST * STEP 2 ఇక్కడ / శరీరం> / html>

02. కనిపించే HTML కంటెంట్

కనిపించే HTML కంటెంట్ కనిపించే వచనాన్ని కలిగి ఉన్న వ్యాస కంటైనర్‌ను కలిగి ఉంటుంది. ఆర్టికల్ కంటైనర్ యొక్క ముఖ్యమైన భాగం ‘డేటా-యానిమేట్’ లక్షణం, ఇది విజువల్ ఎఫెక్ట్‌లను వర్తింపచేయడానికి CSS చే సూచించబడుతుంది. వ్యాసం పేజీలోని ప్రధాన శీర్షిక అని సూచించడానికి వ్యాసం లోపల ఉన్న వచనం h1 ట్యాగ్ నుండి తయారు చేయబడింది.

వ్యాసం డేటా-యానిమేట్ = "తరలించు"> h1> హలో దేర్! / h1> / వ్యాసం>

03. CSS దీక్ష

‘Style.css’ అనే క్రొత్త ఫైల్‌ను సృష్టించండి. మొదటి సూచనల సెట్ పేజీ యొక్క HTML కంటైనర్ మరియు శరీరాన్ని నల్లని నేపథ్యాన్ని కలిగి ఉంటుంది, అలాగే కనిపించే సరిహద్దు అంతరం లేదు. పేజీలోని అన్ని పిల్లల అంశాలకు వారసత్వంగా తెలుపును డిఫాల్ట్ టెక్స్ట్ రంగుగా సెట్ చేస్తారు; టెక్స్ట్ మేకింగ్ కంటెంట్ యొక్క డిఫాల్ట్ నలుపు రంగును తప్పించడం అదృశ్యంగా కనిపిస్తుంది.

html, శరీరం {నేపథ్యం: # 000; పాడింగ్: 0; మార్జిన్: 0; రంగు: #fff; }

04. యానిమేషన్ కంటైనర్

‘డేటా-యానిమేట్’ లక్షణంతో సూచించబడిన కంటెంట్ కంటైనర్ నిర్దిష్ట శైలులను కలిగి ఉంది. దీని పరిమాణం vw మరియు vh కొలత యూనిట్లను ఉపయోగించి స్క్రీన్ యొక్క పూర్తి పరిమాణంతో సరిపోయేలా సెట్ చేయబడింది, అలాగే కొద్దిగా తిప్పబడుతుంది. ‘మూవ్‌ఇన్’ అనే యానిమేషన్ వర్తించబడుతుంది, ఇది 20 సెకన్ల వ్యవధిలో ఉంటుంది మరియు అనంతంగా పునరావృతమవుతుంది.

[data-animate = "తరలించు"] {స్థానం: సాపేక్ష; వెడల్పు: 100vw; ఎత్తు: 100 విహెచ్; అస్పష్టత: 1; యానిమేషన్: తరలింపు 20 లలో అనంతం; టెక్స్ట్-అలైన్: సెంటర్; రూపాంతరం: తిప్పండి (20 దేగ్); }

05. యానిమేషన్ దీక్ష

మునుపటి దశలో ప్రస్తావించబడిన ‘మూవ్‌ఇన్’ యానిమేషన్‌కు @keyframes ని ఉపయోగించి నిర్వచనం అవసరం. యానిమేషన్ యొక్క 0% నుండి ప్రారంభమయ్యే మొదటి ఫ్రేమ్ డిఫాల్ట్ ఫాంట్ పరిమాణం, టెక్స్ట్ పొజిషనింగ్ మరియు కనిపించే నీడను సెట్ చేస్తుంది. అదనంగా, అంశం సున్నా అస్పష్టతతో సెట్ చేయబడింది, తద్వారా ఇది మొదట్లో కనిపించదు - అనగా. వీక్షణ లేకుండా ప్రదర్శించబడుతుంది.

@keyframes moveIn {0% {font-size: 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% {font-size: 8em; ఎడమ: -8 ఎమ్; అస్పష్టత: 1; } 100% {ఫాంట్-పరిమాణం: 10 ఎమ్; ఎడమ: -10 ఎమ్; అస్పష్టత: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *

గమనిక: మీరు ఏ ప్రాజెక్టును ప్రారంభించినా, భరించగలిగే క్లౌడ్ నిల్వను కలిగి ఉండటం చాలా అవసరం (మా గైడ్ సహాయం చేస్తుంది).

ఈ వ్యాసం మొదట సృజనాత్మక వెబ్ డిజైన్ మ్యాగజైన్ వెబ్ డిజైనర్ యొక్క 273 సంచికలో ప్రచురించబడింది. ఇష్యూ 273 ను ఇక్కడ కొనండి లేదా వెబ్ డిజైనర్‌కు ఇక్కడ సభ్యత్వాన్ని పొందండి.