Contenido
- Empezando
- Creando la base del tocadiscos
- Creando los pies
- El brazo y la cabeza
- Colores y texturas
- Representación y exportación
- Terminando el logo
- Animar el logo
Hay varias formas de crear animaciones 3D en la web, la mayoría de las cuales requieren un buen conocimiento de JavaScript y WebGL, o el uso de un complemento como Flash. Gracias a las transformaciones 3D de CSS, es posible crear 3D utilizando solo HTML y CSS, pero no es fácil de hacer. Tridiv, mi aplicación en línea gratuita, simplifica el proceso, ofreciendo una interfaz WYSIWYG simple e intuitiva que permite a los usuarios crear objetos 3D sin escribir una sola línea de código.
En este tutorial, crearemos y animaremos un logotipo para "Tridiv Records", un sello discográfico ficticio, utilizando solo HTML y CSS. La imagen principal del logotipo se creará en 3D con Tridiv. Luego agregaremos los elementos tipográficos usando HTML y CSS regular.
Puedes ver la animación final y el código que la genera aquí.
Empezando
Comenzaremos creando el tocadiscos en 3D con Tridiv. Dirígete a tridiv.com e inicia la aplicación. Deberá utilizar Chrome, Safari u Opera 15 (o posterior).
Antes de comenzar, es importante comprender la interfaz de Tridiv. La sección principal del editor se compone de cuatro vistas: en la parte superior izquierda está la vista 3D, que proporciona una vista completa de la escena. Las otras tres vistas lo muestran desde arriba, lateral y frontalmente. Con estas tres vistas, puede crear, editar y mover formas 3D.
La barra de herramientas horizontal está dividida en dos partes: la parte izquierda muestra información relacionada con su documento; la parte derecha contiene herramientas para crear y editar formas. La Moverse selección y Editar Los botones de selección cambian entre los diferentes modos de edición.
El panel de propiedades (la barra lateral) muestra la configuración del documento, como el zoom y el ajuste a la cuadrícula, y las propiedades de la forma seleccionada (tamaño, posición, rotación, color, etc.). La unidad utilizada para dimensiones y posición es ems; los ángulos de rotación están en grados.
Para evitar confusiones más adelante en el tutorial, usaremos la siguiente abreviatura:
w = ancho h = altura d = profundidad diam = diámetro x grados = rotación en el eje x y grados = rotación en el eje y z grados = rotación en el eje z
Creando la base del tocadiscos
Comience estableciendo el valor de zoom en 200. Para ayudar a dibujar las formas, active la configuración de ajustar a la cuadrícula en el Configuración del documento sección de la barra lateral. Establezca el valor de ajuste en 0.125.
La base del tocadiscos está compuesta por un simple cuboide, así que haga clic en el Agregar cuboide en la barra de herramientas superior. Debería ver aparecer el paralelepípedo en las cuatro vistas del editor.
Cambiar el nombre de la forma a base utilizando el campo de nombre del panel de propiedades (debajo Propiedades de forma). El nombre de la forma debe ser un nombre de clase CSS válido porque se utilizará en el código generado por el editor. Usaremos estos nombres de clase más adelante al animar el logotipo, así que asegúrese de nombrar cada nueva forma que cree correctamente.
Una vez que se nombra el cuboide, asegúrese de que esté seleccionado en la vista superior (debe estar resaltado en azul, con un anillo circular de herramientas alrededor), luego haga clic en el Editar en la parte superior del anillo para mostrar los controles de edición. Arrastre las manijas de control a los lados del cuboide, hasta que alcancen el ancho y la profundidad w = 10 y d = 8 en el Propiedades de forma.
Haga clic en la forma dentro de la vista lateral. Esto mostrará los controladores de edición en esta vista, lo que nos permitirá cambiar su altura. Ajuste la altura hasta que alcance h = 2. También puede escribir valores directamente en el panel de propiedades. Para redondear las esquinas del cuboide, cambie los valores de las esquinas en el panel de propiedades a 1.75, luego presione el [Ingresar] clave para aplicar los cambios. Tendrás algo como esto.
Creando los pies
Para los pies del tocadiscos, usaremos cilindros. Agregue un cilindro, luego cambie su diámetro a diam = 1,75 y su altura a h = 0,5. Haga clic en el Moverse botón de selección en la barra de herramientas superior para mostrar el área que se puede arrastrar en la forma. Mueva el cilindro debajo de la base, colocándolo en una de las esquinas. (Es posible que deba moverlo en las vistas superior, lateral y frontal).
Duplique el cilindro (presione el Duplicar en el anillo circular de herramientas, o presione el D llave) y mover el nuevo cilindro a otra esquina de la base. Repita el proceso hasta que las cuatro patas estén colocadas correctamente. No olvide nombrar los cilindros (por ejemplo, pies-izquierda-arriba, pies-derecha-arriba, pies-izquierda-abajo, pies-izquierda-arriba). Cuando haya hecho eso, el resultado debería verse así.
Ahora veremos cómo crear el plato, el disco, el eje del brazo y el botón. El proceso para crear las siguientes formas es similar al de los pies. Estas son las dimensiones utilizadas para los diferentes cilindros:
plato: diam = 7; h = 0,5 disco: diam = 6,75; botón h = 0,25: diam = 1,5; h = 0,25 brazo-eje-base: diam = 2,25; h = 0,25 brazo-eje: diam = 1,375; h = 1
Para refinar los lados de los cilindros, puede aumentar el número de caras en cada uno, utilizando el campo de lados en el panel de propiedades. No agregue demasiados lados, ya que esto puede influir negativamente en el rendimiento global del editor y la animación final. En este caso, le aconsejo que no utilice más de 32 lados para el plato y el disco. Deberías tener algo como esto.
El brazo y la cabeza
Para el brazo y la cabeza del tocadiscos, usaremos cuboides. Para el brazo, cree un cuboide (w = 0,25; h = 0,25; d = 4), luego aplique una rotación de -33° sobre el eje y. Para la cabeza, crea un cuboide (w = 0,5; h = 0,5; d = 1), luego aplique una rotación de -33° sobre el eje y. Alinee ambas formas con el cilindro del eje del brazo. El resultado debería verse así.
Colores y texturas
Casi hemos terminado con el tocadiscos. El último paso es asignar colores y aplicar una textura al vinilo (una imagen que representa la superficie del disco). Para asignar colores, seleccione una forma y haga clic en el colores campo en el panel de propiedades. Tridiv le permite especificar colores individuales para cada cara de una forma, pero, en este ejemplo, necesitamos usar el campo all para cambiar el color de todas las caras. Para hacer esto, simplemente ingrese un código de color hexadecimal en el campo, luego confirme presionando Ingresar.
Estos son los colores utilizados en este ejemplo:
base: # 0099FF pies, botón, eje, brazo y cabeza: # F2EEE5 disco: # fa7f7a
Para la textura del vinilo, el proceso es similar a la asignación de colores. Seleccione el cilindro del disco, luego haga clic en el imagenes campo en el panel de propiedades. Pega la URL de la imagen que quieres aplicar al vinilo en el campo superior y confirma presionando Ingresar. Puede utilizar una imagen propia o descargar la utilizada en este ejemplo.
Ahora debería tener algo parecido a esto.
Representación y exportación
Ahora que el tocadiscos está listo, vamos a trabajar en la forma en que se renderiza antes de exportarlo. Haga clic en el Avance en la parte superior del panel de propiedades. Establezca el valor de zoom en 200 para mostrar el plato giratorio más grande. Para eliminar los bordes negros de las formas, vaya a la Fronteras sección del panel y establezca la opacidad en 0. El resultado debería verse así.
Queremos que el plato giratorio se encienda desde arriba. Para hacer esto, gire la escena de tal manera que la parte superior del tocadiscos quede frente a usted. La base debe verse perfectamente rectangular. Cambiar los valores de luz y oscuridad en la sección tridiv.com/d/4k6 del panel de propiedades regenerará las sombras dentro de la escena. Cambie el valor de la luz a 0.
¡El tocadiscos ya está listo para exportar!
Terminando el logo
Estamos listos para agregar el texto al logo y crear la animación del logo. Haga clic en el Editar en el botón CodePen en la parte inferior izquierda del Avance view para exportar el código a CodePen. Es importante tener en cuenta que el código CSS generado por Tridiv no utiliza prefijos de proveedores, por lo que deberá utilizar herramientas como prefixr.com o leaverou.github.io/prefixfree para que el código sea funcional en todos los navegadores. Comience cerrando el panel de JavaScript, ya que no lo vamos a utilizar. En el panel HTML, elimine la etiqueta de estilo aplicada al .escena div.
Expanda el panel CSS y agregue el siguiente código al final:
.escena {transformar: translateY (-140px) rotateX (-55deg); }
Aquí el translateY (-140px) mueve el tocadiscos 140px hacia arriba, dejando espacio para el texto debajo de él. Entonces el rotateX (-55deg) establece la inclinación vertical del plato giratorio.
Para agregar el texto, debe agregar un .título div justo después de la apertura #tridiv div en el panel HTML. Dentro, agregue dos tramos> (.título principal y .subtítulo), separado por hr />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> REGISTROS / span> / div>…
A continuación, debe aplicar las fuentes y los estilos correctos. En el panel CSS, importe la fuente Open Sans utilizada en el logotipo y agregue los estilos básicos para los elementos de texto.
@import url (http://fonts.googleapis.com/css?family=Open+Sans:300); / * Centrado de bloques de texto + estilos de fuente básicos * / título {posición: absoluta; arriba: 50%; izquierda: 50%; margen: 0 0 0 -165px; ancho: 330px; altura: 5em; familia de fuentes: "Open Sans", sans-serif; peso de fuente: 300; tamaño de fuente: 24px; alineación de texto: centro; espaciado entre letras: 1.5em; color: # 0099FF; } título hr {borde: 1px sólido # fa7f7a; margen: .75em 0; } intervalo de título {display: block; }. título-principal {tamaño de fuente: 2.15em; } .sub-title {sangría de texto: .25em; }
¡Voilà! Tu logo está completo. Debería parecerse a la imagen de abajo. Una vez que haya terminado su modelo 3D, puede usar el poder de CSS para hacerlo aún mejor agregando estilos, animaciones o eventos de mouse: simplemente trate el modelo 3D como cualquier otro elemento HTML.
Animar el logo
Vea una animación con el logotipo aquí. A medida que las partes del tocadiscos "caen", cada una de ellas comparte la misma animación de fotogramas clave con diferentes retrasos. Las formas tienen el atributo superior establecido en 50%. Para crear el efecto de caída, animamos el atributo superior de -400px a 50%:
@keyframes caen {0% {top: -400px; } / * Comenzamos la animación colocando la forma a una altura de 400px * / 100% {top: 50%; } / * luego lo terminamos en su posición original * /}
Puede agregar esta animación a todas las formas, de la siguiente manera:
.shape {superior: -400px; animación: caen 1s facilitan 0s hacia adelante; }
Establezca el atributo superior en -400px y agregue un retraso:
.platter {retardo de animación: 1.05s; } .disc {retardo de animación: 1,35 s; } .button {animation-delay: 1.5s; } ...
Cree el efecto de "rebote" final con el rotateX atributo:
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); }
Así es como creamos esta versión en particular, pero recuerda: ¡no hay límites!
Palabras: Julian Garnier
Este artículo apareció originalmente en el número 248 de la revista net.
