విషయము
- 01. రోల్ఓవర్ టెక్స్ట్ ప్రభావం
- 02. CSS ను సృష్టించండి
- 03. పదాన్ని ఉంచండి
- 04. పైకి మరియు పైగా
- 05. క్రిందికి కొట్టుమిట్టాడుతోంది
- 06. ప్రజలకు ఆటోమేటిక్
- 07. ప్రత్యామ్నాయ తరగతులను జోడించండి
రోల్ఓవర్ లింక్‌లు వినియోగదారు దృష్టిని ఆకర్షించడానికి ఒక గొప్ప మార్గం, ప్రత్యేకించి అవి అసాధారణమైనవి లేదా అసలైనవి చేస్తే. మిడిల్ చైల్డ్ గొప్ప ప్రభావాన్ని కలిగి ఉంది, అరుదుగా మరెక్కడా కనిపించదు, ఇది ప్రతి అక్షరాన్ని సంగ్రహిస్తుంది మరియు వాటిని యానిమేషన్‌తో విభజిస్తుంది, ఇది సందర్శకుడు పదం మీద కదిలినప్పుడు ప్రారంభమవుతుంది. శాండ్‌విచ్ బ్రాండ్ యొక్క ఉల్లాసభరితమైన పాత్రను తెలియజేయడానికి యానిమేషన్ సహాయపడుతుంది.
ఈ వ్యాసంలో, మీ సైట్‌లోని ప్రభావాన్ని ఎలా పున ate సృష్టి చేయాలో మేము మీకు చూపుతాము. మరింత ప్రేరణ కోసం, ఉత్తమ CSS యానిమేషన్ ఉదాహరణలకు మా గైడ్‌ను చూడండి (వాటిని ఎలా కోడ్ చేయాలో సూచనలతో). కొంచెం భిన్నమైన వాటి కోసం, అగ్ర వెబ్‌సైట్ బిల్డర్ లేదా ఉత్తమ క్లౌడ్ నిల్వను ఎంచుకోండి. మరియు మీరు మీ సైట్‌ను మరింత క్లిష్టంగా మారుస్తుంటే, మీ వెబ్ హోస్టింగ్ సరిగ్గా ఉందని నిర్ధారించుకోండి.
01. రోల్ఓవర్ టెక్స్ట్ ప్రభావం
మిడిల్ చైల్డ్ వెబ్‌సైట్‌లో గొప్ప టెక్స్ట్ ఎఫెక్ట్‌లలో ఒకటి మెనులోని రోల్ఓవర్ ఎఫెక్ట్స్ కోసం, ఇక్కడ అక్షరాలు టెక్స్ట్‌లో విడిపోయి కొద్దిగా తిరుగుతాయి. కొన్ని సాధారణ HTML ట్యాగ్‌లతో దీన్ని ప్రారంభించండి.
div> div> అల్పాహారం </ div> / div>
02. CSS ను సృష్టించండి
కింది CSS నియమాలను జోడించడానికి ప్రత్యేక CSS ఫైల్ లేదా స్టైల్ ట్యాగ్‌లను ఉపయోగించండి మరియు శరీరాన్ని మరియు రేపర్ పూర్తి ఎత్తును తీసుకునేలా చూసుకోవడం ద్వారా పేజీ బ్రౌజర్ యొక్క పూర్తి పరిమాణాన్ని నింపండి.
శరీరం {వెడల్పు: 100%; ఎత్తు: 100%; మార్జిన్: 0; పాడింగ్: 0; } .వ్రాపర్ {ప్రదర్శన: గ్రిడ్; ఎత్తు: 100%; }
03. పదాన్ని ఉంచండి
ది పదం తరగతి గ్రిడ్‌లోని పదాన్ని కేంద్రీకరిస్తుంది. ఇచ్చిన ఏదైనా వచనం పదం తరగతి దీనిని వర్తింపజేయవచ్చు. ది పైకి తరగతి ప్రతి ఇతర అక్షరాలకు వర్తించబడుతుంది మరియు ఇవి పైకి కదులుతాయి.
.word {font-size: 3em; మార్జిన్: ఆటో ఆటో; } .వర్డ్ .అప్ {ప్రదర్శన: ఇన్లైన్-బ్లాక్; పరివర్తన: అనువాద 3 డి (0 పిక్స్, 0 పిక్స్, 0 పిక్స్) రొటేట్ (0 దేగ్); పరివర్తన: అన్ని 0.5 లు సులభంగా-అవుట్ అవుతాయి; }
04. పైకి మరియు పైగా
ఇప్పుడు ది డౌన్ తరగతి చాలా సారూప్య సెట్టింగులను పంచుకుంటుంది పైకి కానీ హోవర్ పైకి కదలికను చూపిస్తుంది పైకి రోల్ఓవర్. రూపాన్ని పెంచడానికి పైకి కూడా కొద్దిగా తిప్పబడుతుంది.
.word .down {display: ఇన్లైన్-బ్లాక్; పరివర్తన: అనువాద 3 డి (0 పిక్స్, 0 పిక్స్, 0 పిక్స్) రొటేట్ (0 దేగ్); పరివర్తన: అన్ని 0.5 లు సులభంగా-అవుట్ అవుతాయి; } .వర్డ్: హోవర్ .అప్ {ట్రాన్స్ఫార్మ్: ట్రాన్స్లేట్ 3 డి (0 పిక్స్, -8 పిక్స్, 0 పిక్స్) రొటేట్ (12 దేగ్); రంగు: # 058b05}
05. క్రిందికి కొట్టుమిట్టాడుతోంది
వినియోగదారు వచనం మీద కదిలినప్పుడు, దిగువ తరగతి వచనాన్ని క్రిందికి కదిలిస్తుంది. తరువాత జావాస్క్రిప్ట్లో టెక్స్ట్ ప్రత్యేక స్పాన్లుగా విభజించబడుతుంది, తరగతులు ప్రత్యామ్నాయ స్పాన్లకు స్వయంచాలకంగా జోడించబడతాయి.
.word: హోవర్ .డౌన్ {పరివర్తన: అనువాదం 3 డి (0 పిక్స్, 8 పిక్స్, 0 పిక్స్) రొటేట్ (-12 దేగ్); రంగు: # 058 బి 05; }
06. ప్రజలకు ఆటోమేటిక్
ప్రతి అక్షరాన్ని వేర్వేరు తరగతులతో ప్రత్యామ్నాయ పరిధిలో ఉంచడం చాలా ఇబ్బందికరంగా ఉంటుంది, కాబట్టి మేము సెలెక్టర్‌ను ప్రశ్నించడానికి మరియు ప్రతి అక్షరాన్ని తీసుకోవడానికి జావాస్క్రిప్ట్‌ను పొందడం ద్వారా ప్రక్రియను ఆటోమేట్ చేస్తాము. ఇక్కడ str ప్రస్తుత అక్షరాన్ని టెక్స్ట్ ద్వారా లూప్ చేస్తున్నప్పుడు వేరియబుల్ పట్టుకుంటుంది.
script> var element = document.querySelectorAll (’.word’); (var i = 0, l = element.length; i l; i ++) {var str = element [i] .textContent; అంశాలు [i] .innerHTML = ’’;
07. ప్రత్యామ్నాయ తరగతులను జోడించండి
ఇప్పుడు మరొక లూప్ ప్రతి అక్షరాన్ని దాని స్వంత స్పాన్ ఎలిమెంట్‌లో ఉంచి, గాని జతచేస్తుంది పైకి లేదా డౌన్ తరగతికి తరగతి. మీరు దీన్ని బ్రౌజర్‌లో చూస్తే, కొద్దిగా తిరిగేటప్పుడు, ప్రతి అక్షరం ద్వారా పైకి క్రిందికి వచన విభజన కనిపిస్తుంది.
మిడిల్ చైల్డ్ వెబ్‌సైట్‌లో మీరు చర్యలో ప్రభావాన్ని చూడవచ్చు.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); మూలకాలు [i] .appendChild (spn); spn.textContent = str [j]; pos = (j% 2) లెట్? ‘పైకి’: ‘క్రిందికి’; spn.classList.add (pos); script} / స్క్రిప్ట్>
ఈ వ్యాసం మొదట క్రియేటివ్ వెబ్ డిజైన్ మ్యాగజైన్‌లో ప్రచురించబడింది వెబ్ డిజైనర్.ఇష్యూ 286 కొనండి లేదా సభ్యత్వాన్ని పొందండి.
