Contenuto
- 01. Avvia il documento HTML
- 02. Contenuto HTML visibile
- 03. Iniziazione CSS
- 04. Contenitore di animazione
- 05. Iniziazione dell'animazione
- 06. Animazione in vista
- 07. Finalizzazione dell'animazione
Love Lost di Jam3 canadese è una poesia interattiva meravigliosamente oscura, pronta per i dispositivi mobili, con un vero cuore sui sentimenti duraturi intorno all'amore perduto. Il layout del sito web è stato realizzato utilizzando HTML5 con la libreria GSAP che ne alimenta l'animazione, una delle sue caratteristiche visivamente più sorprendenti è il suo testo 3D animato che dà vita alla poesia di Love Lost.
- Crea effetti tipografici 3D interattivi
Sembra impressionante da morire e non è difficile incorporarlo nel tuo lavoro per creare un'esperienza utente coinvolgente; ecco come si fa.
Vuoi creare il tuo sito accattivante? Prova uno strumento per la creazione di siti Web e fai in modo che le cose funzionino senza intoppi scegliendo il servizio di web hosting giusto.
01. Avvia il documento HTML
Il primo passo è definire la struttura del documento HTML. Ciò include il contenitore HTML che avvia il documento, che contiene le sezioni head e body. Mentre la sezione head viene utilizzata principalmente per caricare il file CSS esterno, la sezione body memorizzerà il contenuto della pagina visibile creato nel passaggio 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 QUI / body> / html>
02. Contenuto HTML visibile
Il contenuto HTML visibile è costituito da un contenitore di articoli che contiene il testo visibile. La parte importante del contenitore dell'articolo è l'attributo "data-animate", a cui farà riferimento il CSS per applicare gli effetti visivi. Il testo all'interno dell'articolo è composto da un tag h1 per indicare che il contenuto è il titolo principale della pagina.
article data-animate = "move in"> h1> Hello There! / h1> / article>
03. Iniziazione CSS
Crea un nuovo file chiamato "styles.css". La prima serie di istruzioni imposta il corpo e il contenitore HTML della pagina in modo che abbiano uno sfondo nero e nessuna spaziatura visibile tra i bordi. Il bianco è anche impostato come colore del testo predefinito per tutti gli elementi secondari della pagina da ereditare; evitando il colore nero predefinito del testo facendo apparire il contenuto invisibile.
html, body {background: # 000; imbottitura: 0; margine: 0; colore: #fff; }
04. Contenitore di animazione
Al contenitore di contenuti a cui fa riferimento l'attributo "data-animate" sono applicati stili specifici. Le sue dimensioni sono impostate per corrispondere alle dimensioni complete dello schermo utilizzando le unità di misura vw e vh, oltre ad essere leggermente ruotate. Viene applicata un'animazione chiamata "moveIn", che durerà per una durata di 20 secondi e si ripeterà all'infinito.
[data-animate = "move in"] {position: relative; larghezza: 100vw; altezza: 100vh; opacità: 1; animazione: moveIn 20s infinite; text-align: center; trasformare: ruotare (20deg); }
05. Iniziazione dell'animazione
L'animazione "moveIn" a cui si fa riferimento nel passaggio precedente richiede una definizione che utilizzi @keyframes. Il primo fotogramma che inizia allo 0% dell'animazione imposta la dimensione del carattere predefinita, il posizionamento del testo e l'ombra visibile. Inoltre, l'elemento è impostato con opacità zero in modo che sia inizialmente invisibile, ad es. visualizzato fuori dalla vista.
@keyframes moveIn {0% {font-size: 1em; sinistra: 0; opacità: 0; text-shadow: nessuno; } * * * PASSAGGIO 6 QUI}
06. Animazione in vista
Il fotogramma successivo viene posizionato al 10% attraverso l'animazione. Questa cornice imposta l'opacità su completamente visibile, con il risultato che il testo viene gradualmente animato nella visualizzazione.Inoltre, più ombre vengono aggiunte con valori di colore blu e decrescenti per dare l'illusione di una profondità 3D al testo.
10% {opacità: 1; text-shadow: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * PASSAGGIO 7 QUI
07. Finalizzazione dell'animazione
I fotogrammi finali si verificano all'80% e alla fine dell'animazione. Questi sono responsabili dell'aumento della dimensione del carattere e dello spostamento dell'elemento verso sinistra. Vengono inoltre applicate nuove impostazioni per l'animazione dell'ombra del testo, mentre il testo scompare dalla vista dai fotogrammi dall'80% al 100%.
80% {font-size: 8em; a sinistra: -8em; opacità: 1; } 100% {font-size: 10em; sinistra: -10em; opacità: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Nota: qualunque sia il progetto che stai intraprendendo, avere un cloud storage in grado di farcela è essenziale (la nostra guida ti aiuterà).
Questo articolo è stato originariamente pubblicato nel numero 273 della rivista di web design creativo Web Designer. Acquista il numero 273 qui o iscriviti a Web Designer qui.
