మీ వెబ్‌సైట్‌కు గ్లిచ్ ప్రభావాన్ని జోడించండి

విషయము

• 01. మీ పేజీ యొక్క బాడీ ట్యాగ్‌కు కోడ్‌ను జోడించండి
• 02. డిస్ప్లేని స్టైలింగ్
• 03. లోపం ప్రదర్శిస్తుంది
• 04. ప్రతిదీ పట్టుకోండి
• 05. లోపం నడుపుతోంది
• 06. సాధారణ స్థితికి తిరిగి వెళ్ళు
• ఇప్పుడే న్యూయార్క్ జనరేట్ కోసం మీ టికెట్ పొందండి

దృష్టిని ఆకర్షించడానికి మరియు దానిని పట్టుకోవటానికి ఒక గొప్ప మార్గం - మీ ప్రతిభను ఆఫ్ నుండి ప్రదర్శించే వెబ్‌సైట్ లేఅవుట్‌ను సృష్టించడం (మంచి వెబ్‌సైట్ బిల్డర్ నిర్మాణానికి సహాయపడుతుంది). ఉక్రెయిన్ వెబ్ ఏజెన్సీ వింటేజ్ యొక్క సైట్ దీనికి ఒక గొప్ప ఉదాహరణ, గ్లాస్ కణాల నుండి నిర్మించిన పల్సేటింగ్ లోగో మరియు హోవర్‌లో సక్రియం చేసే మనోహరమైన బిట్ గ్లిచ్ యొక్క ఆకర్షణీయమైన కలయికతో మిమ్మల్ని దాని VR డిజైన్ పోర్ట్‌ఫోలియోలోకి తీసుకుంటుంది.

• వెబ్ యానిమేషన్: కోడ్ అవసరం లేదు

తక్కువగా ఉపయోగించిన సరళమైన గ్లిచ్ ప్రభావం మీ సైట్‌కు దృశ్యమాన ఆసక్తిని కొద్దిగా ఇవ్వగలదు మరియు ఇది అమలు చేయడం ఆశ్చర్యకరంగా సులభం. దీన్ని ఎలా చేయాలో ఇక్కడ ఉంది.

మనస్సులో సంక్లిష్టమైన వెబ్‌సైట్ ఉందా? మీ వెబ్ హోస్టింగ్ పనిలో ఉందని నిర్ధారించుకోండి. మరియు మీ డిజైన్ ఫైల్‌లను క్లౌడ్ నిల్వలో భద్రంగా ఉంచండి.

ఫైళ్ళను డౌన్‌లోడ్ చేయండి ఈ ట్యుటోరియల్ కోసం.

01. మీ పేజీ యొక్క బాడీ ట్యాగ్‌కు కోడ్‌ను జోడించండి

సరళమైన గ్లిచ్ ప్రభావాన్ని సృష్టించడం చాలా రకాలుగా చేయవచ్చు. ఇక్కడ మేము టెక్స్ట్ పైభాగంలో యానిమేటెడ్ GIF ని కలిగి ఉండబోతున్నాం, ఇది డిస్ప్లేలో ఆన్ మరియు ఆఫ్ చేయబడుతుంది. మొదట, మీ కోడ్ యొక్క బాడీ ట్యాగ్‌కు ఈ కోడ్‌ను జోడించండి.

div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>

02. డిస్ప్లేని స్టైలింగ్

కంటెంట్ వర్క్ సాన్స్ అని పిలువబడే గూగుల్ ఫాంట్ల నుండి నిర్దిష్ట టైప్‌ఫేస్‌ను ఉపయోగిస్తుంది. అక్కడి నుండి లింక్‌ను పట్టుకుని మీ తల విభాగంలో ఉంచండి; స్టైల్ ట్యాగ్‌లు లేదా ప్రత్యేక CSS ఫైల్‌కు CSS ని జోడించండి. పేజీ తెల్లటి వచనంతో నల్లగా తయారవుతుంది మరియు హోల్డర్ టెక్స్ట్ కోసం స్టైల్ చేయబడింది.

శరీరం {నేపథ్యం: # 000; font-family: ’వర్క్ సాన్స్’, సాన్స్-సెరిఫ్; రంగు: #fff; } # హోల్డర్ {font-size: 6em; వెడల్పు: 500 పిక్స్‌; ఎత్తు: 300 పిక్స్‌; మార్జిన్: 0 ఆటో; స్థానం: సాపేక్ష; }

03. లోపం ప్రదర్శిస్తుంది

గ్లిచ్ ప్రభావం టెక్స్ట్ పైభాగంలో నేరుగా ఉంచబడిన నేపథ్య చిత్రంగా ఉంటుంది. ఇక్కడ ముఖ్యమైన భాగం ఏమిటంటే, అస్పష్టతను సున్నాకి తగ్గించడం ద్వారా ఇది కనిపించకుండా చేస్తుంది, తద్వారా వినియోగదారు వచనంతో సంభాషించే వరకు అది చూపబడదు.

# గ్లిచ్ {స్థానం: సంపూర్ణ; ఎగువ: 0; ఎడమ: 0; z- సూచిక: 10; వెడల్పు: 100%; ఎత్తు: 100%; నేపథ్యం: url (glitch.gif); అస్పష్టత: 0; }

04. ప్రతిదీ పట్టుకోండి

బాడీ విభాగం చివర స్క్రిప్ట్ ట్యాగ్‌లను జోడించి, పత్రంలోని ‘గ్లిచ్’ డివికి కాష్ చేసిన సూచనను సృష్టించండి. అప్పుడు ‘ఓవర్’ అనే వేరియబుల్ తప్పుడుకి సెట్ చేయబడుతుంది. వినియోగదారు టెక్స్ట్ పైకి వెళ్ళినప్పుడు ఇది ఆన్ మరియు ఆఫ్ అవుతుంది.

var gl = document.getElementById ("గ్లిచ్"); var over = తప్పుడు;

05. లోపం నడుపుతోంది

మౌస్ టెక్స్ట్ మీద కదిలినప్పుడు గ్లిచ్ ఫంక్షన్ అంటారు. గ్లిచ్ రన్ చేయకపోతే గ్లిచ్ దృశ్యమానత ఆన్ చేయబడుతుంది మరియు ఇది ఒకటిన్నర సెకన్ల తర్వాత ఆపివేయబడుతుంది.మీరు దీనితో ప్రయోగాలు చేయవచ్చు మరియు యాదృచ్ఛిక సంఖ్యను మరింత అనూహ్యంగా చేయడానికి ఉపయోగించవచ్చు.

ఫంక్షన్ గ్లిచ్ () {if (over == false) {gl.style.opacity = "1"; setTimeout (ఫంక్షన్ () {సాధారణ ();}, 1500); }}

06. సాధారణ స్థితికి తిరిగి వెళ్ళు

గ్లిచ్ ప్రభావం వినియోగదారుకు చాలా బాధించేదిగా ఉండకూడదు, కానీ ఇంటరాక్టివ్ ఎలిమెంట్‌గా ఇది బాగా పనిచేస్తుంది. ఇక్కడ, కోడ్ అస్పష్టతను తిరిగి సున్నాకి రీసెట్ చేస్తుంది, తద్వారా ఇది టెక్స్ట్ పైభాగంలో కనిపించదు.

ఫంక్షన్ సాధారణ () {gl.style.opacity = "0"; }

ఇప్పుడే న్యూయార్క్ జనరేట్ కోసం మీ టికెట్ పొందండి

మూడు రోజుల వెబ్ డిజైన్ ఈవెంట్ జనరేట్ న్యూయార్క్ తిరిగి వచ్చింది. 25-27 ఏప్రిల్ 2018 మధ్య జరుగుతున్న, హెడ్‌లైన్ స్పీకర్లలో సూపర్ ఫ్రెండ్లీ డాన్ మాల్, వెబ్ యానిమేషన్ కన్సల్టెంట్ వాల్ హెడ్, ఫుల్-స్టాక్ జావాస్క్రిప్ట్ డెవలపర్ వెస్ బోస్ మరియు మరిన్ని ఉన్నారు. పూర్తి రోజు వర్క్‌షాప్‌లు మరియు విలువైన నెట్‌వర్కింగ్ అవకాశాలు కూడా ఉన్నాయి - దాన్ని కోల్పోకండి. ఇప్పుడే మీ జనరేట్ టికెట్ పొందండి.

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