Cree un logotipo 3D animado para su sitio

Hay varias formas de crear 3D animación en la web, la mayoría de ellos requiere un buen conocimiento de JavaScript y WebGL, o el uso de un complemento como Destello . Gracias a las transformaciones CSS 3D, es posible crear 3D usando 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 usando Tridiv. Dirigirse 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. los Moverse selección y Editar Los botones de selección cambian entre los diferentes modos de edición.

Tridiv puede crear modelos 3D complejos como este X-Wing, por ejemplo

cómo hacer un servidor grav
Tridiv puede crear modelos 3D complejos como este X-Wing, por ejemplo

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:

|_+_|

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 se compone de un cuboide simple, así que haga clic en el Agregar cuboide en la barra de herramientas superior. Debería ver aparecer el cuboide 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 esta .

Creando los pies

Para los pies del plato giratorio vamos a utilizar cilindros. Agregue un cilindro, luego cambie su diámetro a diámetro = 1,75 y su altura a h = 0,5 . Clickea 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).

Nosotros

Estamos usando cilindros para crear los pies de la plataforma giratoria. Haz que estén alineados correctamente debajo de la base.

Duplique el cilindro (presione el Duplicar en el anillo circular de herramientas, o presione el D llave) y para 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 como esta .

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:

|_+_|

Para refinar los lados de los cilindros, puede aumentar el número de caras en cada uno, usando 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 esta .

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 y-axis . Para la cabeza, crea un cuboide ( w = 0,5; h = 0,5; d = 1 ), luego aplique una rotación de -33° sobre el y-axis . Alinee ambas formas con el cilindro del eje del brazo. El resultado debería verse como esta .

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:

|_+_|

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 descargue el que se usa en este ejemplo .

Ahora deberías tener algo que se parezca esta .

Representación y exportación

Ahora que el tocadiscos está listo, trabajaremos 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 parecerse a esta .

Nosotros

¿El interruptor de Nintendo es una tableta?
Estamos usando cuboides para formar el brazo y la cabeza de la plataforma giratoria. Crear el brazo de la plataforma giratoria puede ser complicado. Por lo tanto, es importante asegurarse de verificar que las formas no se superpongan

Queremos que el plato giratorio se ilumine 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 claros y oscuros en la sección tridiv.com/d/4k6 del panel de propiedades regenerará las sombras dentro de la escena. Cambie el valor de luz a 0 .

¡El tocadiscos ya está listo para exportar!

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 usa prefijos de proveedor, por lo que deberá usar 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 usar. 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:

|_+_|

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 ( .título principal y .subtítulo ), separado por


:

|_+_|

Luego debe aplicar las fuentes y 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.

|_+_|

¡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.

Nosotros

Hemos cambiado los valores de luz y oscuridad. Al girar el plato giratorio de esta manera, nos aseguramos de que las sombras en los lados sean todas uniformes.

Ver una animación usando el logo 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% :

|_+_|

Puede agregar esta animación a todas las formas, de la siguiente manera:

|_+_|

Establezca el atributo superior en -400px y agregue un retraso:

|_+_|

Cree el efecto final de 'rebote' usando el rotateX atributo:

|_+_|

Así es como creamos esta versión en particular, pero recuerda: ¡no hay límites!

Palabras: Julian Garnier

Este artículo apareció originalmente en número de la revista net 248.