Inhalt
- 01. Rollover Text Effekt
- 02. CSS erstellen
- 03. Positioun d'Wuert
- 04. Op an iwwer
- 05. Hovering down
- 06. Automatesch fir d'Leit
- 07. Dobäizemaachen ofwiesselnd Klassen
Rollover Links sinn e super Wee fir de Benotzer d'Opmierksamkeet ze gräifen, besonnesch wa se eppes Ongewéinleches oder Original maachen. Middle Child huet e groussen Effekt, seele soss anzwousch, datt all Buschtaf erfaasst an se mat Animatioun getrennt ass, déi erspuert wann de Visiteur iwwer d'Wuert schwieft. D'Animatioun hëlleft dem spilleresche Charakter de Sandwichmark ze vermëttelen.
An dësem Artikel weise mir Iech wéi Dir den Effekt op Ärem Site nei erstallt. Fir méi Inspiratioun, kuckt an eisem Guide fir déi bescht CSS Animatiounsbeispiller (mat Instruktioune wéi een se kodéiert). Fir eppes e bëssen anescht, probéiert en Top Websäit Builder oder eis Wiel vun de beschte Cloud Späicher. A wann Dir Är Site méi komplex maacht, gitt sécher datt Äre Webhosting um Punkt ass.
01. Rollover Text Effekt
Ee vun de groussen Texteffekter op der Middle Child Websäit ass fir d'Rollover Effekter am Menu, wou d'Buschtawen op den Text getrennt sinn a liicht rotéieren. Fänkt dëst mat e puer einfachen HTML Tags un.
02. CSS erstellen
Benotzt eng separat CSS Datei oder Stil Tags fir déi folgend CSS Regelen derbäi ze maachen an d'Säit déi voll Gréisst vum Browser ze fëllen andeems de Kierper an de Wrapper déi voll verfügbar Héicht huelen.
Kierper {Breet: 100%; Héicht: 100%; Spillraum: 0; padding: 0; } .Wrapper {Display: Gitter; Héicht: 100%; }
03. Positioun d'Wuert
Den Wuert Klass zentéiert d'Wuert am Gitter. All Text deen den Wuert Klass kann dat uwenden. Den erop Klass gëtt op all anere Bréif applizéiert an dës wäerte no uewe réckelen.
.word {Schrëftgréisst: 3em; Spillraum: Auto Auto; } .word .up {display: inline-block; transforméieren: translate3d (0px, 0px, 0px) rotéieren (0deg); Iwwergang: all 0.5s Liichtegkeet-an-eraus; }
04. Op an iwwer
Elo den erof Klass deelt ganz ähnlech Astellungen zu der erop awer den Hover weist d'Bewegung no uewen fir de erop sech ëmdréinen. Upwards gëtt och liicht gedréit fir de Look ze verbesseren.
.word .down {affichéieren: inline-block; transforméieren: translate3d (0px, 0px, 0px) rotéieren (0deg); Iwwergang: all 0.5s Liichtegkeet-an-eraus; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotéieren (12deg); Faarf: # 058b05}
05. Hovering down
Wann de Benotzer iwwer den Text schwieft, réckelt d'Ënnerklass den Text no ënnen. Méi spéit am JavaScript gëtt den Text a getrennte Spänn opgedeelt mat de Klassen automatesch derbäi fir alternativ Spannen.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotéieren (-12deg); Faarf: # 058b05; }
06. Automatesch fir d'Leit
Et ass e bëssen Ierger fir all Buschtaf an ofwiesselnd Spannunge mat verschiddene Klassen ze setzen, sou datt mir de Prozess automatiséieren andeems mir JavaScript kréien fir de Wieler nozefroen an all Buschtaf ze huelen. Hei den Str Variabel gräift den aktuelle Bréif wéi en duerch den Text leeft.
Skript> var Elementer = document.querySelectorAll ('.word'); fir (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; Elementer [i] .innerHTML = ’’;
07. Dobäizemaachen ofwiesselnd Klassen
Elo plazéiert eng aner Loop all Buschtaf a sengem eegene Spannelement an füügt entweder den erop oder erof Klass op d'Spann. Wann Dir dëst am Browser kuckt, gesitt Dir den Text vun all Buschtaf opgedeelt an erof, wärend Dir liicht rotéiert.
Dir kënnt den Effekt an der Aktioun op der Middle Child Websäit gesinn.
fir (var j = 0, ll = str.längt; j ll; j ++) {var spn = document.createElement ('span'); Elementer [i] .appendChild (spn); spn.textContent = str [j]; looss pos = (j% 2)? 'Erop': 'erof'; spn.classList.add (pos); }} / Skript>
Dësen Artikel gouf ursprénglech am kreativen Webdesign Magazin publizéiert Web Designer.Kaaft Ausgab 286 oder abonnéieren.
