Crea un logo 3D animato per il tuo sito

Contenuto

• Iniziare
• Creazione della base del giradischi
• Creare i piedi
• Il braccio e la testa
• Colori e trame
• Rendering ed esportazione
• Finitura del logo
• Anima il logo

Esistono diversi modi per creare animazioni 3D sul Web, la maggior parte dei quali richiede una buona conoscenza di JavaScript e WebGL, o l'utilizzo di un plug-in come Flash. Grazie alle trasformazioni CSS 3D, è possibile creare 3D utilizzando solo HTML e CSS, ma non è facile. Tridiv, la mia app online gratuita, semplifica il processo, offrendo un'interfaccia WYSIWYG semplice e intuitiva che consente agli utenti di creare oggetti 3D senza scrivere una sola riga di codice.

In questo tutorial creeremo e animeremo un logo per "Tridiv Records", un'etichetta discografica fittizia, utilizzando solo HTML e CSS. La grafica principale del logo verrà creata in 3D utilizzando Tridiv. Quindi aggiungeremo gli elementi tipografici utilizzando HTML e CSS regolari.

Puoi vedere l'animazione finale e il codice che la genera qui.

Iniziare

Inizieremo creando il giradischi in 3D utilizzando Tridiv. Vai su tridiv.com e avvia l'app. Dovrai utilizzare Chrome, Safari o Opera 15 (o versioni successive).

Prima di iniziare, è importante comprendere l'interfaccia di Tridiv. La sezione principale dell'editor è composta da quattro viste: in alto a sinistra c'è la vista 3D, che fornisce una visione completa della scena. Le altre tre viste lo mostrano dall'alto, laterale e frontale. Utilizzando queste tre visualizzazioni, puoi creare, modificare e spostare forme 3D.

La barra degli strumenti orizzontale è divisa in due parti: la parte sinistra mostra le informazioni relative al tuo documento; la parte destra contiene gli strumenti per creare e modificare le forme. Il Mossa selezione e modificare i pulsanti di selezione commutano tra le diverse modalità di modifica.

Il riquadro delle proprietà (la barra laterale) mostra le impostazioni del documento come lo zoom e lo snap alla griglia e le proprietà della forma selezionata (dimensione, posizione, rotazione, colore e così via). L'unità utilizzata per dimensioni e posizione è la ems; gli angoli di rotazione sono in gradi.

Per evitare qualsiasi confusione più avanti nel tutorial, useremo la seguente scorciatoia:

w = larghezza h = altezza d = profondità diam = diametro x deg = rotazione sull'asse x y deg = rotazione sull'asse y z deg = rotazione sull'asse z

Creazione della base del giradischi

Inizia impostando il valore di zoom su 200. Per aiutare a disegnare le forme, attiva l'impostazione di aggancio alla griglia in Impostazioni documento sezione della barra laterale. Imposta il valore di snap su 0.125.

La base del giradischi è composta da un semplice parallelepipedo, quindi fai clic su Aggiungi cuboide pulsante nella barra degli strumenti in alto. Dovresti vedere il parallelepipedo apparire in tutte e quattro le viste nell'editor.

Rinomina la forma in base utilizzando il campo del nome del riquadro delle proprietà (sotto Proprietà forma). Il nome della forma deve essere un nome di classe CSS valido perché verrà utilizzato nel codice generato dall'editor. Useremo questi nomi di classe in seguito durante l'animazione del logo, quindi assicurati di nominare correttamente ogni nuova forma che crei.

Una volta che il cuboide è stato nominato, assicurati che sia selezionato nella vista superiore (dovrebbe essere evidenziato in blu, con un anello circolare di strumenti attorno ad esso), quindi fai clic sul pulsante modificare pulsante nella parte superiore dell'anello per mostrare le maniglie di modifica. Trascina le maniglie di controllo ai lati del parallelepipedo fino a raggiungere la larghezza e la profondità w = 10 e d = 8 nel Proprietà forma.

Fare clic sulla forma all'interno della vista laterale. Questo mostrerà le maniglie di modifica in questa vista, permettendoci di cambiarne l'altezza. Regola l'altezza finché non raggiunge h = 2. È inoltre possibile digitare i valori direttamente nel riquadro delle proprietà. Per arrotondare gli angoli del parallelepipedo, modificare i valori degli angoli nel riquadro delle proprietà in 1.75, quindi premere il pulsante [Accedere] tasto per applicare le modifiche. Avrai qualcosa di simile.

Creare i piedi

Per i piedi del giradischi, utilizzeremo dei cilindri. Aggiungi un cilindro, quindi modifica il suo diametro in diam = 1,75 e la sua altezza a h = 0,5. Clicca sul Mossa pulsante di selezione nella barra degli strumenti in alto per mostrare l'area trascinabile sulla forma. Spostare il cilindro sotto la base, posizionandolo in uno degli angoli. (Potrebbe essere necessario spostarlo nelle viste superiore, laterale e frontale.)

Duplica il cilindro (premi il pulsante Duplicare pulsante nell'anello circolare degli strumenti o premere il pulsante D chiave) e per spostare il nuovo cilindro in un altro angolo della base. Ripetere il processo fino a quando tutti e quattro i piedini non sono correttamente posizionati. Non dimenticare di nominare i cilindri (ad esempio, piedi in alto a sinistra, piedi-destra-in alto, piedi-sinistra-fondo, piedi in alto a sinistra). Dopo averlo fatto, il risultato dovrebbe essere simile a questo.

Vedremo ora come creare il piatto, il disco, l'asse del braccio e il pulsante. Il processo per creare le forme successive è simile a quello per i piedi. Ecco le dimensioni utilizzate per i diversi cilindri:

piatto: diam = 7; h = 0,5 disco: diam = 6,75; h = 0,25 bottone: diam = 1.5; h = 0,25 braccio-asse-base: diam = 2,25; h = 0,25 asse-braccio: diam = 1.375; h = 1

Per rifinire i lati dei cilindri, è possibile aumentare il numero di facce in ciascuno di essi, utilizzando il campo lati nel riquadro delle proprietà. Non aggiungere troppi lati in quanto ciò può influenzare negativamente le prestazioni globali dell'editor e dell'animazione finale. In questo caso, ti consiglio di non utilizzare più di 32 lati per il piatto e il disco. Dovresti avere qualcosa di simile.

Il braccio e la testa

Per il braccio e la testa del giradischi, utilizzeremo i cuboidi. Per il braccio, crea un parallelepipedo (w = 0,25; h = 0,25; d = 4), quindi applica una rotazione di -33° sul asse y. Per la testa, crea un parallelepipedo (w = 0,5; h = 0,5; d = 1), quindi applica una rotazione di -33° sul asse y. Allinea entrambe le forme con il cilindro dell'asse del braccio. Il risultato dovrebbe essere simile a questo.

Colori e trame

Abbiamo quasi finito con il giradischi. Il passaggio finale consiste nell'assegnare i colori e applicare una trama al vinile (un'immagine che rappresenta la superficie del disco). Per assegnare i colori, seleziona una forma e fai clic su colori campo nel riquadro delle proprietà. Tridiv ti consente di specificare i singoli colori per ogni faccia di una forma, ma, in questo esempio, dobbiamo usare il campo all per cambiare il colore di tutte le facce. Per fare ciò, è sufficiente inserire un codice colore esadecimale nel campo, quindi confermare premendo accedere.

Ecco i colori usati in questo esempio:

base: # 0099FF piedi, pulsante, asse, braccio e testa: # F2EEE5 disco: # fa7f7a

Per la trama del vinile, il processo è simile all'assegnazione dei colori. Selezionare il cilindro del disco, quindi fare clic su immagini campo nel riquadro delle proprietà. Incolla l'URL dell'immagine che desideri applicare al vinile nel campo superiore e conferma premendo accedere. Puoi usare una tua immagine o scaricare quella usata in questo esempio.

Ora dovresti avere qualcosa che assomigli a questo.

Rendering ed esportazione

Ora che il giradischi è pronto, lavoreremo sul modo in cui viene renderizzato prima di esportarlo. Clicca il Anteprima nella parte superiore del riquadro delle proprietà. Imposta il valore di zoom su 200 per visualizzare il giradischi più grande. Per rimuovere i bordi neri delle forme, vai al frontiere sezione del riquadro e impostare l'opacità su 0. Il risultato dovrebbe essere simile a questo.

Vogliamo che il giradischi sia illuminato dall'alto. Per fare ciò, ruota la scena in modo tale che la parte superiore del giradischi sia rivolta verso di te. La base dovrebbe apparire perfettamente rettangolare. La modifica dei valori di luce e buio nella sezione tridiv.com/d/4k6 del riquadro delle proprietà rigenererà le ombre all'interno della scena. Modificare il valore della luce in 0.

Il giradischi è ora pronto per l'esportazione!

Finitura del logo

Siamo pronti per aggiungere il testo al logo e creare l'animazione del logo. Clicca il modificare sul pulsante CodePen in basso a sinistra del file Anteprima vista per esportare il codice in CodePen. È importante notare che il codice CSS generato da Tridiv non utilizza prefissi del fornitore, quindi dovrai utilizzare strumenti come prefixr.com o leaverou.github.io/prefixfree per rendere il codice funzionale in ogni browser. Inizia chiudendo il riquadro JavaScript, poiché non lo utilizzeremo. Nel riquadro HTML, rimuovi il tag di stile applicato al file .scena div.

Espandi il riquadro CSS e aggiungi il seguente codice alla fine:

.scene {transform: translateY (-140px) rotateX (-55deg); }

Qui, il file translateY (-140px) sposta il giradischi di 140 px verso l'alto, lasciando spazio al testo sottostante. Poi il rotateX (-55deg) imposta l'inclinazione verticale del piatto rotante.

Per aggiungere il testo, è necessario aggiungere un file .titolo div subito dopo l'apertura #tridiv div nel riquadro HTML. Dentro, aggiungine due campate> (.main-title e .sub-title), divisi da hr />:

div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…

È quindi necessario applicare i caratteri e gli stili corretti. Nel riquadro CSS, importa il carattere Open Sans utilizzato nel logo e aggiungi gli stili di base per gli elementi di testo.

@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centratura del blocco di testo + stili di carattere di base * / titolo {posizione: assoluto; in alto: 50%; a sinistra: 50%; margine: 0 0 0 -165px; larghezza: 330 px; altezza: 5em; famiglia di caratteri: "Open Sans", sans-serif; spessore del carattere: 300; dimensione del carattere: 24px; text-align: center; spaziatura lettere: 1.5em; colore: # 0099FF; } titolo hr {border: 1px solid # fa7f7a; margine: .75em 0; } intervallo del titolo {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }

Ecco! Il tuo logo è completo. Dovrebbe assomigliare all'immagine qui sotto. Una volta che il tuo modello 3D è finito, puoi usare la potenza dei CSS per renderlo ancora migliore aggiungendo stili, animazioni o eventi del mouse: tratta semplicemente il modello 3D come qualsiasi altro elemento HTML.

Anima il logo

Guarda un'animazione usando il logo qui. Man mano che le parti del giradischi "cadono", ciascuna di esse condivide la stessa animazione di fotogrammi chiave con ritardi diversi. Le forme hanno l'attributo superiore impostato su 50%. Per creare l'effetto di caduta, animiamo l'attributo superiore da -400px per 50%:

@keyframes fall {0% {top: -400px; } / * Iniziamo l'animazione posizionando la forma ad un'altezza di 400px * / 100% {top: 50%; } / * quindi lo terminiamo nella sua posizione originale * /}

Puoi aggiungere questa animazione a tutte le forme, come segue:

.shape {top: -400px; animazione: caduta di 1 s facilita 0 s in avanti; }

Imposta l'attributo superiore su -400px e aggiungi un ritardo:

.platter {ritardo dell'animazione: 1.05s; } .disc {ritardo dell'animazione: 1,35 s; } .button {ritardo dell'animazione: 1.5s; } ...

Crea l'effetto finale di "rimbalzo" utilizzando il rotateX attributo:

90% {transform: translateY (-5em) rotateX (780deg) rotateY (0deg); } 95% {transform: translateY (-4em) rotateX (620deg) rotateY (0deg); } 100% {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg); }

È così che abbiamo creato questa particolare versione, ma ricorda: non ci sono limiti!

Parole: Julian Garnier

Questo articolo è apparso originariamente nel numero 248 di net magazine.