Content
- 01. Inicieu el document HTML
- 02. Contingut HTML visible
- 03. Iniciació CSS
- 04. Contenidor d'animació
- 05. Iniciació a l’animació
- 06. Animar a la vista
- 07. Finalització de l'animació
Love Lost by Canada’s Jam3 és un poema interactiu bellament fosc i preparat per a mòbils amb un cor real sobre els sentiments perdurables al voltant de l’amor perdut. El disseny del lloc web es va crear mitjançant HTML5 amb la biblioteca GSAP que potencia la seva animació, una de les seves funcions més impactants visualment és el seu text animat en 3D que realitza la poesia de Love Lost.
- Feu efectes interactius de tipografia 3D
Sembla impressionant, i no és difícil incorporar-lo al vostre propi treball per crear una experiència d’usuari atractiva; així es fa.
Voleu crear el vostre propi lloc atractiu? Proveu una eina de creació de llocs web i, per tal que funcioni correctament, escolliu el servei d’allotjament web adequat.
01. Inicieu el document HTML
El primer pas és definir l’estructura del document HTML. Això inclou el contenidor HTML que inicia el document, que conté les seccions de capçalera i cos. Tot i que la secció principal s'utilitza principalment per carregar el fitxer CSS extern, la secció del cos emmagatzemarà el contingut de la pàgina visible creat al pas 2.
! DOCTYPE html> html> head> title> Moviment text 3D / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 AQUÍ / cos> / html>
02. Contingut HTML visible
El contingut HTML visible consisteix en un contenidor d'articles que conté el text visible. La part important del contenidor de l’article és l’atribut ‘data-animate’, al qual CSS farà referència per aplicar els efectes visuals. El text de l’article es fa a partir d’una etiqueta h1 per indicar que el contingut és el títol principal de la pàgina.
article data-animate = "move in"> h1> Hola! / h1> / article>
03. Iniciació CSS
Creeu un fitxer nou anomenat 'styles.css'. El primer conjunt d’instruccions estableix que el contenidor i el cos HTML de la pàgina tinguin un fons negre i que no hi hagi cap espaiat de vores visible. El blanc també es defineix com a color de text per defecte per heretar tots els elements secundaris de la pàgina; evitant el color negre predeterminat del text, fent que el contingut sembli invisible.
html, body {background: # 000; encoixinat: 0; marge: 0; color: #fff; }
04. Contenidor d'animació
El contenidor de contingut al qual es fa referència amb l’atribut ‘data-animate’ té aplicats estils específics. La seva mida està configurada perquè coincideixi amb la mida completa de la pantalla mitjançant unitats de mesura vw i vh, a més de girar lleugerament. S’aplica una animació anomenada ‘moveIn’, que durarà 20 segons i es repetirà infinitament.
[data-animate = "move in"] {posició: relativa; amplada: 100vw; alçada: 100vh; opacitat: 1; animació: moveIn 20s infinit; text-align: centre; transformar: girar (20 graus); }
05. Iniciació a l’animació
L'animació "moveIn" a què es fa referència al pas anterior requereix una definició mitjançant @keyframes. El primer marc que comença al 0% de l'animació defineix la mida de lletra, el posicionament del text i l'ombra visible per defecte. A més, l’element s’estableix amb opacitat zero de manera que inicialment és invisible, és a dir. es mostra fora de vista.
@keyframes moveIn {0% {font-size: 1em; esquerra: 0; opacitat: 0; text-ombra: cap; } * * * PAS 6 AQUÍ}
06. Animar a la vista
El següent fotograma es col·loca al 10% a través de l'animació. Aquest marc estableix l'opacitat com a totalment visible, cosa que fa que el text s'animi gradualment a la vista.A més, s’afegeixen diverses ombres amb valors de color blau i decreixent per donar il·lusions a la profunditat 3D del text.
10% {opacitat: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * PAS 7 AQUÍ
07. Finalització de l'animació
Els fotogrames finals es produeixen al 80% i al final de l’animació. Aquests s’encarreguen d’augmentar la mida de la lletra i de moure l’element cap a l’esquerra. També s’apliquen nous paràmetres perquè l’ombra del text s’animi, alhora que s’esvaeix el text fora de la vista dels marcs del 80% al 100%.
80% {font-size: 8em; esquerra: -8em; opacitat: 1; } 100% {font-size: 10em; esquerra: -10em; opacitat: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Nota: qualsevol projecte que tingueu en compte és essencial tenir un emmagatzematge al núvol que pugui fer-ho (la nostra guia us ajudarà).
Aquest article es va publicar originalment al número 273 de la revista de disseny web creatiu Web Designer. Compra el número 273 aquí o bé subscriviu-vos a Web Designer aquí.
