Content
- Començant
- Creació de la base del plat giratori
- Creació dels peus
- El braç i el cap
- Colors i textures
- Representació i exportació
- Acabant el logotip
- Animar el logotip
Hi ha diverses maneres de crear animacions 3D al web, la majoria d’elles requereixen un bon coneixement de JavaScript i WebGL o l’ús d’un complement com Flash. Gràcies a les transformacions 3D de CSS, és possible crear 3D utilitzant només HTML i CSS, però no és fàcil fer-ho. Tridiv, la meva aplicació gratuïta en línia, simplifica el procés i ofereix una interfície WYSIWYG senzilla i intuïtiva que permet als usuaris crear objectes 3D sense escriure una sola línia de codi.
En aquest tutorial, crearem i animarem un logotip per a "Tridiv Records", un segell discogràfic fictici, amb només HTML i CSS. La imatge principal del logotip es crearà en 3D mitjançant Tridiv. A continuació, afegirem els elements tipogràfics mitjançant HTML i CSS normals.
Aquí podeu veure l'animació final i el codi que la genera.
Començant
Començarem creant el plat giratori en 3D mitjançant Tridiv. Aneu a tridiv.com i inicieu l'aplicació. Haureu d’utilitzar Chrome, Safari o Opera 15 (o versions posteriors).
Abans de començar, és important entendre la interfície Tridiv. La secció principal de l'editor es compon de quatre vistes: a la part superior esquerra hi ha la vista 3D, que proporciona una vista completa de l'escena. Les altres tres vistes ho mostren des de la part superior, lateral i frontal. Amb aquestes tres visualitzacions, podeu crear, editar i moure formes 3D.
La barra d’eines horitzontal es divideix en dues parts: la part esquerra mostra informació relativa al vostre document; la part dreta conté eines per crear i editar formes. El Mou selecció i Edita els botons de selecció canvien entre els diferents modes d’edició.
El tauler de propietats (la barra lateral) mostra els paràmetres del document, com ara zoom i ajust a la quadrícula, i les propietats de la forma seleccionada (mida, posició, rotació, color, etc.). La unitat utilitzada per a dimensions i posició és ems; els angles de rotació estan en graus.
Per evitar confusions més endavant al tutorial, farem servir la abreviatura següent:
w = amplada h = alçada d = profunditat diam = diàmetre x deg = rotació a l'eix x y deg = rotació a l'eix y z deg = rotació a l'eix z
Creació de la base del plat giratori
Comenceu establint el valor del zoom a 200. Per ajudar a dibuixar les formes, activeu el paràmetre d'ajust a la quadrícula a Configuració del document secció de la barra lateral. Establiu el valor de fixació a 0.125.
La base del plat giratori està composta per un simple cuboide, així que feu clic a Afegiu un cuboide a la barra d'eines superior. Hauríeu de veure com apareix el cuboide a les quatre visualitzacions de l'editor.
Canvieu el nom de la forma per base utilitzant el camp de nom del tauler de propietats (a Propietats de la forma). El nom de la forma ha de ser un nom de classe CSS vàlid perquè s'utilitzarà al codi generat per l'editor. Utilitzarem aquests noms de classes més endavant en animar el logotip, així que assegureu-vos que anomeneu correctament totes les formes noves que creeu.
Un cop anomenat el cuboide, assegureu-vos que estigui seleccionat a la vista superior (s’ha de ressaltar en blau, amb un anell circular d’eines al voltant) i feu clic a Edita a la part superior del timbre per mostrar els identificadors d'edició. Arrossegueu els mànecs de control als costats del cuboide fins que arribin a l'amplada i la profunditat w = 10 i d = 8 al Propietats de la forma.
Feu clic a la forma dins de la vista lateral. Això mostrarà els identificadors d'edició en aquesta vista, cosa que ens permetrà canviar-ne l'alçada. Ajusteu l'alçada fins que arribi h = 2. També podeu escriure valors directament al tauler de propietats. Per arrodonir les cantonades del cuboide, canvieu els valors de les cantonades del tauler de propietats a 1.75i, a continuació, premeu el botó [Enter] clau per aplicar els canvis. Tindreu alguna cosa així.
Creació dels peus
Per als peus del plat giratori, farem servir cilindres. Afegiu un cilindre i, a continuació, canvieu-ne el diàmetre a diam = 1,75 i la seva alçada fins a h = 0,5. Feu clic al botó Mou botó de selecció a la barra d'eines superior per mostrar l'àrea arrossegable a la forma. Moveu el cilindre per sota de la base, situant-lo en una de les cantonades. (Pot ser que hagueu de moure-la a la vista superior, lateral i frontal).
Dupliqueu el cilindre (premeu el botó Duplicat a l'anell circular de les eines o premeu el botó D clau) i per moure el nou cilindre a un altre cantó de la base. Repetiu el procés fins que els quatre peus estiguin correctament posicionats. No oblideu posar nom als cilindres (per exemple, peus-esquerra-superior, peus-dreta-dalt, peus-esquerra-baix, peus-esquerra-superior). Quan ho hàgiu fet, el resultat hauria de ser així.
Ara mirarem de crear el plat, el disc, l’eix del braç i el botó. El procés per crear les formes següents és similar al dels peus. A continuació, es mostren les dimensions utilitzades per als diferents cilindres:
plat: diam = 7; h = 0,5 disc: diam = 6,75; h = 0,25 botó: diam = 1,5; h = 0,25 braç-eix-base: diam = 2,25; h = 0,25 eix del braç: diam = 1,375; h = 1
Per perfeccionar els laterals dels cilindres, podeu augmentar el nombre de cares de cadascun, utilitzant el camp laterals del tauler de propietats. No afegiu massa cares, ja que això pot influir negativament en el rendiment global de l'editor i l'animació final. En aquest cas, us aconsellaria que no feu servir més de 32 cares per al plat i el disc. Hauríeu de tenir alguna cosa així.
El braç i el cap
Per al braç i el cap de la placa giratòria, farem servir cuboides. Per al braç, creeu un cuboide (w = 0,25; h = 0,25; d = 4), apliqueu una rotació de -33° a la eix y. Per al cap, creeu un cuboide (w = 0,5; h = 0,5; d = 1), apliqueu una rotació de -33° a la eix y. Alineeu les dues formes amb el cilindre de l'eix del braç. El resultat hauria de ser així.
Colors i textures
Quasi hem acabat amb el tocadiscs. El pas final és assignar colors i aplicar una textura al vinil (una imatge que representa la superfície del disc). Per assignar colors, seleccioneu una forma i feu clic a colors al tauler de propietats. Tridiv us permet especificar colors individuals per a cada cara d'una forma, però, en aquest exemple, hem d'utilitzar el camp Tot per canviar el color de totes les cares. Per fer-ho, només cal que introduïu un codi de color hexadecimal al camp i, a continuació, confirmeu prement Entra.
Aquests són els colors utilitzats en aquest exemple:
base: # 0099FF peus, botó, eix, braç i cap: # F2EEE5 disc: # fa7f7a
Per a la textura del vinil, el procés és similar a l’assignació de colors. Seleccioneu el cilindre del disc i feu clic a imatges al tauler de propietats. Enganxeu l'URL de la imatge que vulgueu aplicar al vinil al camp superior i confirmeu prement Entra. Podeu utilitzar una imatge pròpia o descarregar-la en aquest exemple.
Ara hauríeu de tenir alguna cosa que sembli així.
Representació i exportació
Ara que s’ha fet el tocadiscs, treballarem en la forma en què es renderitza abans d’exportar-lo. Feu clic a Vista prèvia a la part superior del tauler de propietats. Estableix el valor del zoom a 200 per mostrar el tocadiscs més gran. Per eliminar les vores negres de les formes, aneu a Fronteres secció del panell i configureu l'opacitat a 0. El resultat hauria de ser semblant a això.
Volem que el tocadiscs s’il·lumini des de la part superior. Per fer-ho, gireu l’escena de manera que la part superior del plat giratori quedi cap a vosaltres. La base ha de quedar perfectament rectangular. Si canvieu els valors de llum i foscor a la secció tridiv.com/d/4k6 del panell de propietats, es regeneraran les ombres de l’escena. Canvieu el valor de la llum a 0.
El tocadiscs ja està a punt per exportar-se.
Acabant el logotip
Estem preparats per afegir el text al logotip i crear l'animació del logotip. Feu clic a Edita al botó CodePen situat a la part inferior esquerra del fitxer Vista prèvia vista per exportar el codi a CodePen. És important tenir en compte que el codi CSS generat per Tridiv no utilitza prefixos de proveïdor, de manera que haureu d’utilitzar eines com prefixr.com o leaverou.github.io/prefixfree per fer que el codi funcioni a tots els navegadors. Comenceu tancant el tauler de JavaScript, ja que no l’utilitzarem. Al tauler HTML, traieu l'etiqueta d'estil aplicada al fitxer .escena div.
Amplieu el panell CSS i afegiu el codi següent al final:
.scene {transform: translateY (-140px) rotateX (-55deg); }
Aquí, el translateY (-140px) mou la taula giratòria 140 px cap amunt, deixant espai al text que hi ha a sota. Aleshores el rotateX (-55 graus) defineix la inclinació vertical del plat giratori.
Per afegir el text, cal afegir un fitxer .títol div just després de l'obertura #tridiv div al tauler HTML. A dins, afegiu-ne dos abast> (.main-title i .sub-title), separats per h />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div> ...
A continuació, haureu d'aplicar els tipus de lletra i els estils correctes. Al tauler CSS, importeu el tipus de lletra Open Sans utilitzat al logotip i afegiu els estils bàsics per als elements de text.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centratge de blocs de text + estils bàsics de tipus de lletra * / title {posició: absoluta; superior: 50%; esquerra: 50%; marge: 0 0 0 -165px; amplada: 330 px; alçada: 5em; font-family: ‘Open Sans’, sans-serif; pes de la font: 300; mida de la lletra: 24 px; text-align: centre; espaiat entre lletres: 1,5em; color: # 0099FF; } title hr {border: 1px solid # fa7f7a; marge: .75em 0; } extensió del títol {display: block; } .main-title {font-size: 2.15em; } .sub-title {text-indent: .25em; }
Voilà! El vostre logotip està complet. Ha de semblar a la imatge següent. Un cop acabat el model 3D, podeu utilitzar la potència de CSS per millorar-lo encara afegint estils, animacions o esdeveniments del ratolí: només heu de tractar el model 3D com qualsevol altre element HTML.
Animar el logotip
Vegeu una animació amb el logotip aquí. A mesura que les parts de la placa giratòria "cauen", cadascuna d'elles comparteix la mateixa animació de fotograma clau amb diferents retards. Les formes tenen l’atribut superior definit 50%. Per crear l'efecte caiguda, animem l'atribut superior des de -400 px a 50%:
@keyframes cauen {0% {top: -400px; } / * Comencem l'animació posicionant la forma a una alçada de 400 px * / 100% {top: 50%; } / * després acabem a la seva posició original * /}
Podeu afegir aquesta animació a totes les formes, de la següent manera:
.shape {top: -400px; animació: caiguda 1s facilitat 0s cap endavant; }
Establiu l'atribut superior a -400 px i afegiu un retard:
.platter {animation-delay: 1.05s; } .disc {animation-delay: 1.35s; } .button {animation-delay: 1,5 s; } ...
Creeu l'efecte final de "rebot" mitjançant giraX atribut:
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); }
Així és com hem creat aquesta versió en concret, però recordeu: no hi ha límits.
Paraules: Julian Garnier
Aquest article va aparèixer originalment al número 248 de la revista net.
