Inhalt
- 01. Füügt Code an de Kierper Tag vun Ärer Säit bäi
- 02. Styling vum Display
- 03. De Feeler uweisen
- 04. Halt alles
- 05. Leeft de Feeler
- 06. Zréck op Normalitéit
- Kritt Ären Ticket fir Generate New York elo
E super Wee fir d'Opmierksamkeet ze gräifen - an ze halen - ass e Websäit Layout ze kreéieren deen Är Talenter vu vir aus weist (en anstännege Site Builder kann hëllefe beim Bau). D'Ukrain Web Agentur Vintage's Site ass e super Beispill dovun, zitt Iech an säi VR Design Portfolio mat enger opfälleger Kombinatioun vun engem pulséierende Logo gebaut aus Glaspartikelen an engem léiwen Deel vu Feeler, deen op Hover aktivéiert.
- Webanimatioun: Kee Code erfuerderlech
En einfachen Glitch Effekt, dee spuersam benotzt gëtt, kann äre Site e wesentlecht bëssen extra visuellt Interesse ginn, an et ass iwwerraschend einfach ze implementéieren. Hei ass wéi et geet.
Hutt Dir eng komplex Websäit am Kapp? Gitt sécher datt Äre Webhosting d'Aufgab upasst. An haalt Är Design Dateie sécher a Cloud Storage.
Luet d'Dateien erof fir dësen Tutorial.
01. Füügt Code an de Kierper Tag vun Ärer Säit bäi
En einfachen Glitch Effekt ze kreéieren kann op sou vill verschidde Weeër gemaach ginn. Hei wäerte mir et maachen andeems en animéierten GIF iwwer dem Top vum Text ass, deen an der Affichage ugeet an ausgeschalt gëtt. Als éischt, füügt dëse Code an de Body Tag vun Ärer Säit bäi.
div id = "Halter" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUKT- br> ION / div>
02. Styling vum Display
Den Inhalt benotzt e spezifescht Schrëftbild vu Google Schrëften mam Numm Work Sans. Gitt de Link vun do a plazéiert en an Ärem Kapp Sektioun; füügt den CSS dann entweder zu Styletags oder enger separater CSS Datei bäi. D'Säit ass schwaarz mat wäissem Text gemaach an den Halter ass fir den Text styléiert.
Kierper {Hannergrond: # 000; Schrëftfamill: 'Work Sans', sans-serif; Faarf: #fff; } #holder {Schrëftgréisst: 6em; Breet: 500px; Héicht: 300px; Spillraum: 0 Auto; Positioun: relativ; }
03. De Feeler uweisen
De Glitch Effekt ass en Hannergrondbild deen direkt iwwer d'Spëtzt vum Text plazéiert ass. De wichtegen Deel hei ass datt et onsichtbar gemaach gëtt andeems d'Opazitéit op Null reduzéiert gëtt, sou datt et net opdaucht bis de Benotzer mam Text interagéiert.
# Glitch {Positioun: absolut; uewen: 0; lénks: 0; z-Index: 10; Breet: 100%; Héicht: 100%; Hannergrond: url (glitch.gif); Opazitéit: 0; }
04. Halt alles
Füügt Skript Tags un d'Enn vun der Kierpersektioun bäi a kreéiert eng cache Referenz zu der 'Glitch' Div am Dokument. Da gëtt eng Variabel mam Numm 'iwwer' op falsch gesat. Dëst gëtt u- an ausgeschalt wann de Benotzer iwwer den Text réckelt.
var gl = document.getElementById ("glitch"); var iwwer = falsch;
05. Leeft de Feeler
D'Glitchfunktioun gëtt geruff wann d'Maus iwwer den Text réckelt. Wann de Feeler net leeft, da gëtt de Feelvisibilitéit ageschalt an et gëtt no annerhallef Sekonn ausgeschalt.Dir kënnt domat experimentéieren an eng zoufälleg Zuel benotze fir et méi onberechenbar ze maachen.
Funktiounsfeeler () {if (iwwer == falsch) {gl.style.opacity = "1"; setTimeout (Funktioun () {normal ();}, 1500); }}
06. Zréck op Normalitéit
Den Glitch Effekt sollt net bleiwen well et de Benotzer ze nervend wier, mee als interaktivt Element funktionnéiert et gutt. Hei setzt de Code d'Opazitéit zréck op Null sou datt et net uewen um Text sichtbar ass.
Funktioun normal () {gl.style.opacity = "0"; }
Kritt Ären Ticket fir Generate New York elo
Dräi Deeg Web Design Event Generéiere New York ass zréck. Fannt tëscht dem 25-27 Abrëll 2018, Iwwerschrëftsspriecher enthalen SuperFriendly's Dan Mall, Webanimatiounskonsultant Val Head, JavaScript-Entwéckler Wes Bos a méi Stack. Et gëtt och e ganzen Dag u Workshoppen a wäertvoll Netzwierkméiglechkeeten - verpasst et net. Kritt elo Ären Generate Ticket.
Dësen Artikel gouf ursprénglech an der Ausgab 270 vum kreativen Webdesign Magazin Web Designer publizéiert. Kaaft Ausgab 270 hei oder abonnéiert de Web Designer hei.
