Conţinut
- 01. Efect text text
- 02. Creați CSS
- 03. Poziționează cuvântul
- 04. În sus și peste
- 05. Plutind în jos
- 06. Automat pentru oameni
- 07. Adăugați clase alternative
Link-urile de trecere cu mouse-ul sunt o modalitate excelentă de a atrage atenția utilizatorului, mai ales dacă fac ceva neobișnuit sau original. Middle Child are un efect extraordinar, rar văzut în altă parte, care surprinde fiecare literă și le împarte cu animație, care începe atunci când vizitatorul trece peste cuvânt. Animația ajută la transmiterea caracterului jucăuș al mărcii sandwich.
În acest articol, vă vom arăta cum să recreați efectul pe site-ul dvs. Pentru mai multă inspirație, aruncați o privire la ghidul nostru pentru cele mai bune exemple de animație CSS (cu instrucțiuni despre cum să le codificați). Pentru ceva puțin diferit, încercați un constructor de site-uri de top sau alegerea noastră dintre cele mai bune spații de stocare în cloud. Și dacă vă faceți site-ul mai complex, asigurați-vă că găzduirea dvs. web este la îndemână.
01. Efect text text
Unul dintre cele mai bune efecte de text de pe site-ul Middle Child este pentru efectele de rollover din meniu, unde literele se despart pe text și se rotesc ușor. Începeți acest lucru cu câteva etichete HTML simple.
div> div> Mic dejun / div> / div>
02. Creați CSS
Utilizați un fișier CSS separat sau etichete de stil pentru a adăuga următoarele reguli CSS și faceți ca pagina să umple dimensiunea completă a browserului, asigurându-vă că corpul și împachetarea iau toată înălțimea disponibilă.
corp {latime: 100%; înălțime: 100%; marja: 0; umplutură: 0; } .wrapper {display: grid; înălțime: 100%; }
03. Poziționează cuvântul
cuvânt clasa centrează cuvântul în grilă. Orice text căruia i se oferă cuvânt clasa poate avea acest lucru aplicat. sus clasa va fi aplicată oricărei alte litere și acestea se vor deplasa în sus.
.word {font-size: 3em; margin: auto auto; } .word .up {display: inline-block; transformare: translate3d (0px, 0px, 0px) rotire (0deg); tranziție: toate 0,5s ușurință-în-ieșire; }
04. În sus și peste
Acum jos class împarte setări foarte similare cu sus dar hover-ul arată mișcarea în sus pentru sus rostogoli. De asemenea, în sus este rotit ușor pentru a îmbunătăți aspectul.
.word .down {display: inline-block; transformare: translate3d (0px, 0px, 0px) rotire (0deg); tranziție: toate 0,5s ușurință-în-ieșire; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); culoare: # 058b05}
05. Plutind în jos
Când utilizatorul trece peste text, clasa descendentă mută textul în jos. Mai târziu, în JavaScript, textul va fi împărțit în întinderi separate, cu clasele adăugate automat pentru întinderile alternative.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotire (-12deg); culoare: # 058b05; }
06. Automat pentru oameni
Este puțin greu să trebuiască să puneți fiecare literă în intervale alternative cu clase diferite, așa că vom automatiza procesul obținând JavaScript pentru a interoga selectorul și pentru a lua fiecare literă. Aici str variabila apucă litera curentă pe măsură ce parcurge textul.
script> elemente var = document.querySelectorAll ('.word'); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elements [i] .innerHTML = ’’;
07. Adăugați clase alternative
Acum, o altă buclă plasează fiecare literă în propriul element de span și adaugă fie sus sau jos clasă la întinderi. Dacă priviți acest lucru în browser, veți vedea textul împărțit cu fiecare literă în sus și în jos, în timp ce se rotește ușor.
Puteți vedea efectul în acțiune pe site-ul Middle Child.
for (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement ('span'); elements [i] .appendChild (spn); spn.textContent = str [j]; să pos = (j% 2)? 'sus jos'; spn.classList.add (pos); }} / script>
Acest articol a fost publicat inițial în revista de design web creativ Web designer.Cumpărați numărul 286 sau Abonati-va.
