Content
- 01. Efecte de text sobrepassat
- 02. Crea CSS
- 03. Col·loca la paraula
- 04. Més amunt
- 05. Volant cap avall
- 06. Automàtic per a la gent
- 07. Afegiu classes alternes
Els enllaços de transvasament són una manera excel·lent de captar l’atenció dels usuaris, sobretot si fan alguna cosa inusual o original. Middle Child té un gran efecte, poques vegades vist en altres llocs, que captura cada lletra i les divideix amb animació, que s’inicia quan el visitant passa per sobre de la paraula. L’animació ajuda a transmetre el caràcter lúdic de la marca sandvitx.
En aquest article, us mostrem com es recrea l’efecte al vostre lloc. Per obtenir més inspiració, consulteu la nostra guia dels millors exemples d’animació CSS (amb instruccions sobre com codificar-los). Per a alguna cosa una mica diferent, proveu un constructor de llocs web o la nostra selecció del millor emmagatzematge al núvol. I si feu que el vostre lloc sigui més complex, assegureu-vos que l’allotjament web estigui a punt.
01. Efecte de text sobrepassat
Un dels grans efectes de text del lloc web de Middle Child és per als efectes de desplaçament al menú, on les lletres es divideixen en el text i giren lleugerament. Comenceu amb algunes etiquetes HTML simples.
div> div> Esmorzar / div> / div>
02. Crea CSS
Utilitzeu un fitxer CSS o etiquetes d'estil per afegir les següents regles CSS i feu que la pàgina ompli la mida completa del navegador assegurant que el cos i l'embolcall tinguin tota l'alçada disponible.
cos {ample: 100%; alçada: 100%; marge: 0; encoixinat: 0; } .wrapper {display: grid; alçada: 100%; }
03. Col·loca la paraula
El paraula La classe centra la paraula a la graella. Qualsevol text que tingui el fitxer paraula a la classe es pot aplicar això. El amunt la classe s'aplicarà a totes les altres lletres i es desplaçaran cap amunt.
.word {font-size: 3em; marge: auto auto; } .word .up {display: inline-block; transformar: translate3d (0px, 0px, 0px) girar (0deg); transició: tots els 0,5 s facilitat d'entrada-sortida; }
04. Més amunt
Ara el avall class comparteix paràmetres molt similars al amunt però el cursor mostra el moviment cap amunt per al amunt bolcada. També es gira lleugerament cap amunt per millorar l'aspecte.
.word .down {display: inline-block; transformar: translate3d (0px, 0px, 0px) girar (0deg); transició: tots els 0,5 s facilitat d'entrada-sortida; } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); color: # 058b05}
05. Volant cap avall
Quan l'usuari passa el cursor per sobre del text, la classe descendent mou el text cap avall. Més endavant a JavaScript, el text es dividirà en espais separats amb les classes afegides automàticament a espais alternatius.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); color: # 058b05; }
06. Automàtic per a la gent
És una mica complicat haver de posar cada lletra en espais alterns amb classes diferents, de manera que automatitzarem el procés obtenint JavaScript per consultar el selector i agafar cada lletra. Aquí el str La variable agafa la lletra actual mentre recorre el text.
script> var elements = document.querySelectorAll ('.word'); for (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; elements [i] .innerHTML = ’’;
07. Afegiu classes alternes
Ara, un altre bucle col·loca cada lletra en el seu propi element d’extensió i afegeix qualsevol amunt o bé avall classe als trams. Si ho mireu al navegador, veureu el text dividit per cada lletra cap amunt i cap avall, mentre gireu lleugerament.
Podeu veure l’efecte en acció al lloc web de 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]; deixem pos = (j% 2)? 'amunt avall'; spn.classList.add (pos); }} / script>
Aquest article es va publicar originalment a la revista de disseny web creatiu Dissenyador web.Compra el número 286 o bé subscriu-te.
