Tartalom
- 01. Adjon kódot az oldal törzscímkéjéhez
- 02. A kijelző stílusa
- 03. A hiba bemutatása
- 04. Tartson mindent
- 05. A hiba elhárítása
- 06. Vissza a normalitáshoz
- Vegye meg most a Generate New York jegyét
A figyelem felkeltésének és megtartásának remek módja egy olyan weboldal-elrendezés létrehozása, amely a tehetségét kiindulva mutatja be (egy tisztességes weboldal-készítő segíthet az összeállításban). A Vintage ukrán webügynökség webhelye remek példa erre, amely bevonzza Önt VR-tervezési portfóliójába egy üvegszemcsékből épülő, lüktető logó és a lebegéskor aktiválódó kedves kis hibajelzés kombinációjával.
- Webanimáció: Nincs szükség kódra
A takarékosan alkalmazott egyszerű glitch effektus elengedhetetlenül kis vizuális érdeklődést kölcsönöz a webhelyének, és meglepően egyszerűen kivitelezhető. Így teheti meg.
Van egy komplex weboldal? Győződjön meg róla, hogy webtárhelye megfelel a feladatnak. És tartsa biztonságban a tervfájlokat a felhő tárolásában.
Töltse le a fájlokat ehhez az oktatóanyaghoz.
01. Adjon kódot az oldal törzscímkéjéhez
Egy egyszerű hibajelenség létrehozása sokféle módon történhet. Itt azt fogjuk megtenni, hogy egy animált GIF van a szöveg tetején, amelyet a kijelzőn be- és kikapcsol. Először adja hozzá ezt a kódot az oldal törzscímkéjéhez.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> TERMÉK- br> ION / div>
02. A kijelző stílusa
A tartalom egy speciális betűtípust fog használni a Google Fonts-ból, Work Sans néven. Fogja meg a linket onnan, és helyezze a fejrészébe; majd adja hozzá a CSS-t vagy stíluscímkékhez, vagy külön CSS-fájlhoz. Az oldal fekete színű, fehér szöveggel, a tartó pedig a szöveghez van kialakítva.
test {háttér: # 000; font-family: ’Work Sans’, sans-serif; szín: #fff; } #holder {font-size: 6em; szélesség: 500px; magasság: 300px; margó: 0 auto; pozíció: rokon; }
03. A hiba bemutatása
A hibajelenség egy háttérkép lesz, amelyet közvetlenül a szöveg teteje fölé helyezünk. A fontos rész itt az, hogy láthatatlanná teszi az átlátszatlanság nullára csökkentésével, hogy ne jelenjen meg, amíg a felhasználó nem lép kölcsönhatásba a szöveggel.
#glitch {pozíció: abszolút; felső: 0; bal: 0; z-index: 10; szélesség: 100%; magasság: 100%; háttér: url (glitch.gif); átlátszatlanság: 0; }
04. Tartson mindent
Adjon hozzá szkriptcímkéket a törzs szakasz végéhez, és hozzon létre gyorsítótárazott hivatkozást a dokumentum „glitch” div-jára. Ezután a ’over’ nevű változót hamisra állítja. Ez be- és kikapcsol, amikor a felhasználó áthelyezi a szöveget.
var gl = document.getElementById ("hiba"); var over = hamis;
05. A hiba elhárítása
A hiba funkció akkor hívódik meg, amikor az egér a szöveg fölé mozog. Ha a hiba nem fut, akkor a hiba láthatósága bekapcsol, és másfél másodperc múlva kikapcsol.Kísérletezhet ezzel, és véletlenszerű számmal kiszámíthatatlanabbá teheti azt.
function glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Vissza a normalitáshoz
A glitch effektusnak nem szabad maradnia, mivel túl bosszantó lenne a felhasználó számára, de interaktív elemként jól működik. Itt a kód visszaállítja az átlátszatlanságot nullára, hogy ne legyen látható a szöveg tetején.
Normál működés () {gl.style.opacity = "0"; }
Vegye meg most a Generate New York jegyét
Három napos webdesign Generate New York esemény visszatért. A 2018. április 25–27. Között megrendezésre kerülő főelőadók között szerepel a SuperFriendly Dan Mall, a Web animációs tanácsadója, Val Head, a full stack JavaScript-fejlesztő, Wes Bos és még sok más. Emellett egy egész napos workshopok és értékes hálózati lehetőségek is várják - ne hagyja ki. Most szerezze be a Generate jegyét.
Ez a cikk eredetileg a Web Designer kreatív webdesign magazin 270. számában jelent meg. Vásárolja meg a 270-es számot itt vagy itt iratkozzon fel a Web Designerre.
