Turinys
- 01. Pridėkite kodą prie savo puslapio turinio žymos
- 02. Ekrano stilius
- 03. Trikties rodymas
- 04. Laikykite viską
- 05. Veikia triktis
- 06. Grįžti prie normalumo
- Gaukite bilietą į „Generate New York“ dabar
Puikus būdas pritraukti dėmesį - ir jį išlaikyti - sukurti svetainės maketą, kuris pademonstruotų jūsų talentus nuo pat pradžių (tinkamas svetainių kūrėjas gali padėti kurti). Ukrainos internetinės agentūros „Vintage“ svetainė yra puikus to pavyzdys, pritraukiantis jus į savo VR dizaino portfelį su akį traukiančiu pulsuojančio logotipo, pagaminto iš stiklo dalelių, ir mielo šiek tiek trikdžių deriniu, kuris aktyvuojasi ant pakimšimo.
- Žiniatinklio animacija: kodo nereikia
Saugiai naudojamas paprastas trikdžių efektas gali suteikti jūsų svetainei gyvybiškai šiek tiek papildomo vizualinio susidomėjimo ir tai yra stebėtinai lengva įgyvendinti. Štai kaip tai padaryti.
Turite omenyje sudėtingą svetainę? Įsitikinkite, kad jūsų interneto priegloba yra tinkama užduotis. Savo dizaino failus saugokite debesies saugykloje.
Atsisiųskite failus šiai pamokai.
01. Pridėkite kodą prie savo puslapio turinio žymos
Sukurti paprastą trikdymo efektą galima labai įvairiai. Čia mes tai padarysime turėdami animuotą GIF teksto viršuje, kuris bus įjungtas ir išjungtas ekrane. Pirmiausia pridėkite šį kodą prie savo puslapio turinio žymos.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Ekrano stilius
Turinyje bus naudojamas konkretus „Google Fonts“ šriftas, vadinamas „Work Sans“. Paimkite nuorodą iš ten ir įdėkite ją į galvos skyrių; tada pridėkite CSS prie stiliaus žymių arba prie atskiro CSS failo. Puslapis yra juodas su baltu tekstu, o laikiklis yra stiliaus tekstui.
body {background: # 000; šriftų šeima: „Work Sans“, sans-serif; spalva: #fff; } #holder {font-size: 6em; plotis: 500 taškų; aukštis: 300 taškų; paraštė: 0 auto; padėtis: giminaitis; }
03. Trikties rodymas
Trikdymo efektas bus fono paveikslėlis, dedamas tiesiai virš teksto viršaus. Svarbi dalis yra tai, kad jis tampa nematomas sumažinant neskaidrumą iki nulio, kad jis nebūtų rodomas tol, kol vartotojas sąveikauja su tekstu.
#glitch {pozicija: absoliutus; viršuje: 0; kairėje: 0; z indeksas: 10; plotis: 100%; aukštis: 100%; fonas: url (glitch.gif); neskaidrumas: 0; }
04. Laikykite viską
Pridėkite scenarijaus žymas turinio skilties pabaigoje ir sukurkite talpykloje esančią nuorodą į dokumento „glitch“ div. Tada kintamasis, pavadintas „per“, yra nustatytas į „false“. Tai bus įjungta ir išjungta, kai vartotojas perkelia tekstą.
var gl = document.getElementById ("gedimas"); var over = klaidinga;
05. Veikia triktis
„Glitch“ funkcija iškviečiama, kai pelė juda virš teksto. Jei triktis neveikia, trikčių matomumas įjungiamas ir išjungiamas po pusantros sekundės.Galite eksperimentuoti su tuo ir naudoti atsitiktinį skaičių, kad jis būtų nenuspėjamesnis.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Grįžti prie normalumo
Trikdymo efektas neturėtų likti, nes tai būtų pernelyg erzinantis vartotoją, tačiau kaip interaktyvus elementas jis veikia gerai. Čia kodas pakeičia neskaidrumą atgal į nulį, kad jis nebūtų matomas virš teksto.
funkcija normali () {gl.style.opacity = "0"; }
Gaukite bilietą į „Generate New York“ dabar
Trijų dienų interneto dizaino renginys „Generate New York“ grįžo. 2018 m. Balandžio 25–27 d. Pagrindinius pranešėjus sudaro „SuperFriendly“ „Dan Mall“, internetinės animacijos konsultantas „Val Head“, „full-stack JavaScript“ kūrėjas „Wes Bos“ ir kt. Taip pat yra visa diena seminarų ir vertingos tinklų kūrimo galimybės - nepraleiskite to. Gaukite „Generate“ bilietą dabar.
Šis straipsnis iš pradžių buvo paskelbtas kūrybinio interneto dizaino žurnalo „Web Designer“ 270 numeryje. Įsigykite 270 numerį čia arba užsiprenumeruokite „Web Designer“ čia.
