Obsah
- 01. Textový efekt pri prevrátení
- 02. Vytvorte CSS
- 03. Umiestnite slovo
- 04. Hore a znova
- 05. Vznášajúci sa dole
- 06. Automatické pre ľudí
- 07. Pridajte striedavé triedy
Prechodové odkazy sú skvelým spôsobom, ako upútať pozornosť používateľa, najmä ak robia niečo neobvyklé alebo originálne. Prostredné dieťa má vynikajúci efekt, ktorý sa na iných miestach zriedka vyskytuje. Zachytáva každé písmeno a rozdeľuje ich od seba pomocou animácie, ktorá sa naštartuje, keď sa návštevník vznáša nad slovom. Animácia pomáha vyjadriť hravú povahu sendvičovej značky.
V tomto článku vám ukážeme, ako znovu vytvoriť efekt na vašom webe. Ak chcete získať viac inšpirácie, pozrite si nášho sprievodcu najlepšími príkladmi animácií CSS (s pokynmi na ich kódovanie). Ak chcete niečo trochu iné, vyskúšajte špičkový nástroj na tvorbu webových stránok alebo náš výber najlepšieho cloudového úložiska. A ak svoje stránky komplikujete, uistite sa, že je váš webhosting v poriadku.
01. Textový efekt pri prevrátení
Jedným z veľkých textových efektov na webe Middle Child je efekt obnovenia ukážky v ponuke, kde sa písmená v texte rozdelia a mierne rotujú. Začnite s niektorými jednoduchými značkami HTML.
div> div> Raňajky / div> / div>
02. Vytvorte CSS
Pomocou samostatného súboru CSS alebo značiek štýlov pridajte nasledujúce pravidlá CSS a zaistite, aby stránka vyplnila celú veľkosť prehliadača zabezpečením tela a obalu, aby mali k dispozícii celú výšku.
telo {šírka: 100%; výška: 100%; okraj: 0; výplň: 0; } .wrapper {display: grid; výška: 100%; }
03. Umiestnite slovo
The slovo trieda vycentruje slovo do mriežky. Akýkoľvek text, ktorý je uvedený v slovo triedy si to môže nechať uplatniť. The hore triedy sa bude vzťahovať na každé ďalšie písmeno a tieto sa posunú nahor.
.word {font-size: 3em; okraj: auto auto; } .slovo .up {display: inline-block; transformácia: translate3d (0px, 0px, 0px) otočenie (0deg); prechod: všetkých 0,5 s easy-in-out; }
04. Hore a znova
Teraz dole trieda zdieľa veľmi podobné nastavenia ako hore ale vznášadlo ukazuje pohyb nahor pre hore prevrátenie. Hore sa tiež mierne otáča, aby sa vylepšil vzhľad.
.word .down {display: inline-block; transformácia: translate3d (0px, 0px, 0px) otočenie (0deg); prechod: všetkých 0,5 s easy-in-out; } .slovo: vznášať .up {transformácia: translate3d (0px, -8px, 0px) otočenie (12deg); farba: # 058b05}
05. Vznášajúci sa dole
Keď používateľ umiestni kurzor myši na text, trieda nadol posunie text nadol. Neskôr v jazyku JavaScript bude text rozdelený na samostatné rozpätia s tým, že triedy budú automaticky pridávané do alternatívnych rozpätí.
.word: hover .down {transformácia: translate3d (0px, 8px, 0px) rotácia (-12deg); farba: # 058b05; }
06. Automatické pre ľudí
Je trochu nepríjemné, aby sme každé písmeno museli striedať s rôznymi triedami, takže proces zautomatizujeme tak, že dostaneme JavaScript, aby vyhľadal selektor a každé písmeno vzal. Tu str premenná uchopí aktuálne písmeno, keď prechádza textom.
skript> var elements = document.querySelectorAll (‘.word‘); pre (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; prvky [i] .innerHTML = ““;
07. Pridajte striedavé triedy
Teraz ďalšia slučka umiestni každé písmeno do jeho vlastného prvku rozsahu a pridá buď hore alebo dole triedy do rozpätia. Ak sa na to pozriete v prehliadači, uvidíte text rozdelený podľa jednotlivých písmen hore a dole a pri miernom otáčaní.
Účinok môžete vidieť v akcii na webových stránkach Middle Child.
pre (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); prvky [i] .appendChild (spn); spn.textContent = str [j]; nech pos = (j% 2)? 'hore dole'; spn.classList.add (pos); }} / skript>
Tento článok bol pôvodne publikovaný v časopise Creative Web Design Webový dizajnér.Kúpte si číslo 286 alebo prihlásiť sa na odber.
