Cómo convertir múltiples elementos para efectos flotantes abstractos en la división

Como ya sabe hasta ahora, DIV tiene una gran cantidad de configuraciones de diseño que le permiten crear efectos únicos de flujo para cualquier elemento de división (secciones, filas o módulos). Por lo general, un efecto flotante está aislado a un solo elemento. Por ejemplo, si agrega una propiedad de giro a un módulo flotante, la rotación respectiva se activará cuando repase el módulo. Sin embargo, si agrega un efecto de desplazamiento adicional en la fila que contiene el módulo, agrega otra capa de efectos flotantes al pasar sobre el módulo. Esto abre la puerta para algunos efectos flotantes abstractos.
En este tutorial, exploraremos la forma de transformar varios elementos para los efectos de flujo abstracto utilizando la configuración integrada del Div. Y como usaremos las líneas un poco diferentes para este diseño, le mostraré cómo crear una apariencia de cuadrícula para sus líneas, para que pueda presentar estos efectos flotantes en una galería (si lo desea). Vamos a empezar. Tirar del ojo




Descargue la transformación de varios elementos de forma gratuita en The Hover. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Para importar la apariencia en su página, simplemente extraiga el archivo zip y extraiga el archivo JSON al Builder Div.
Pasemos al tutorial, ¿no? Las nociones básicas suscriben a nuestro canal de YouTube para este tutorial, necesitará lo siguiente:
El tema instalado y activo
Algunas fotos. Utilizo imágenes de nuestros aspectos asequibles prefabricados de Divic Builder
Una vez que esté listo, acceda al tablero de WordPress. Luego cree una nueva página (páginas> nueva adición), dé un título a su página e implementa Divi Builder. Elija la opción “Construir desde cero”. ¡Ahora tu lienzo vacío está esperando! Efectos flotantes abstractos para una imagen Este primer diseño combinará los efectos de mover la transformación inclinada en una fila y el módulo de imagen para crear un efecto de ventilación de nuestra imagen. Además de mostrar genial, este efecto también puede servir como una interacción de interfaz útil, que le permite al usuario saber que al hacer clic en la imagen, verá más imágenes. Entonces puede usar la imagen como un enlace a la página de la galería si lo desea.
Aquí le mostramos cómo hacerlo. Primero cree una nueva sección habitual con una fila con una columna. Luego agregue un módulo de imagen en una fila.
Luego agregue una imagen en el modo.

Agregue los efectos del módulo de imagen Ahora podemos agregar algunos efectos de transformación de imagen que girarán e inclinarán la imagen. Para esto, acceda a las opciones de transformación y actualice lo siguiente: Eje X e Y de Transformación: 110%

Rotar el eje de transformación Z: 9 grados

Transformar el eje del eje x e y: 3deg

¡Eso es todo! Suficientemente simple. Ahora tenemos que personalizar la fila para agregar otro efecto de desplazamiento que se activará cuando repase los elementos.

Configuración de fila Para que este diseño funcione, el giro tendrá que tener el mismo tamaño que la imagen interna, de modo que el área de viaje sea el mismo para ambos. Esto nos permitirá agregar diferentes efectos flotantes tanto para el modo como para el giro que se activará cuando supere el modo (o en este caso la imagen). Esto funciona porque moverse por encima de un módulo dentro de una fila activará los efectos de movimiento como si colocara por encima de la fila. Y, debido a que tenemos un efecto de desplazamiento diferente en el módulo, ambos efectos de desplazamiento se activarán cuando supere el módulo. Esto nos permite usar una combinación de efectos flotantes abstractos usando la sombra de la caja, la transformación de la inclinación y el giro de la rotación tanto a su vez como en el módulo.

Ya tenemos los efectos de desplazamiento del módulo para nuestra imagen, ahora debemos ajustar el tamaño de nuestra fila. Dependiendo del tamaño de la imagen, el módulo debe extenderse sobre todo el ancho de la fila, de modo que, desde un punto de vista técnico, no necesita ajustar el ancho. Pero para este ejemplo, disminuiré el giro para dejar espacio para nuestros efectos flotantes. Actualice la configuración de la fila de la siguiente manera: Ancho máximo: 400 PX porque queremos que la altura de nuestra fila coincida con la imagen dentro de ella, debemos deshacernos del relleno predeterminado e inferior: Interferencia personalizada: 0 PX hacia arriba, 0 PX hacia abajo.
Ahora tenemos que agregar una imagen de fondo a la columna de fila. Esta imagen de fondo se verá siempre que el módulo de imagen transforme el efecto de movimiento distorsione y gira. Columna 1 Imagen de fondo: [Ingrese la imagen] Continúe actualizando la fila con una sombra de la caja en el flotador, de la siguiente manera: Box Sombra: consulte Captura de pantalla Horizontal Box de la caja: 0 PX (predeterminada), -30 PX (Float) Posición vertical del cuadro: 0 PX (predeterminado (predeterminado ), -15 PX (Float) Color de sombra: # 002F66
Esta sombra de la caja agrega el efecto de otra imagen que aparece detrás de la imagen de fondo de la fila, que aparecerá una vez que agregamos nuestros efectos de transformación que girarán e inclinarán la imagen de fondo en la visualización.

Finalmente, estamos listos para agregar una propiedad de transformación inclinada para agregar un efecto flotante adicional. Gire el eje x e y: -3deg

El resultado final aquí es el resultado final.

Y subirá maravillosamente en el móvil.
Efectos flotantes abstractos para un impulso (ejemplo 1) Configuración de la fila Cree una nueva sección con una fila de una columna. Luego actualice la configuración de la fila de la siguiente manera: Columna 1 Papel de pantalla izquierdo: RGBA (34.43.58.0.71) Columna 1 Bondazos derecho Gradiente: # 222b3a Imagen de fondo: [inserte la imagen] Ancho máximo: 400 PX Interferencia personalizada: 0 PX arriba, 0 px abajo

Volveremos a la configuración de la fila para completar nuestros efectos flotantes abstractos en un poco, pero por ahora, agregue la llamada al módulo de acción uno por uno.


Modo de llamada de configuración a la acción Abra la configuración del módulo de llamada de acción y actualice el contenido de la siguiente manera: Título: Botón de puntos de texto: Haga clic aquí Contenido: solo para un botón de enlace de URL de período limitado: # (solo para activar el botón por ahora) Usar Color de fondo: no

Luego actualice la configuración de diseño para el texto y el espacio del módulo. Fuente del título: Gilda Pantalla de texto Tamaño del texto: 16 PX El color de texto del botón: # FFB238 Color del fondo del botón: RGBA (0.0,0,0) El ancho del botón: 0 PX

Fineo personalizado: 20% más, 20% inactividad

Ahora agregue un borde al modo. Ancho de Chenar: 2 PX Color Edge: # 222B3a

Se trata de nuestro diseño predeterminado. Ahora es el momento de la parte divertida. Recuerde, debido a que nuestro giro y módulo son esencialmente del mismo tamaño (altura y ancho), el área de viaje será el mismo para ambos. En otras palabras, los efectos del flotador que agregamos a la línea y el módulo se activarán tanto cuando repases los elementos. Esto nos permite usar una combinación de efectos flotantes abstractos usando la sombra de la caja, la transformación de la inclinación y el giro de la rotación tanto a su vez como en el módulo. Comencemos con los efectos de Hover Row. Efectos flotantes seguidos primero, podemos agregar una sombra de caja para flotar a nuestro turno. Abra la configuración de la fila y actualice lo siguiente: Box Sombra: Vea la captura de pantalla de la sombra de la caja: 0 PX (predeterminada), 90 PX (flotante) Posición vertical de la sombra de la caja: 0 PX (predeterminada), 80 PX (floating) Power of spreading The shadow of the box: 0 px (default), -40 px (floating) shade: # FFB238 Note that the shadow of the box will inherit and the transformation options that we will add below. Now, add Una propiedad de rotación e inclinación de la transformación en el flotador. Rota Transformación x eje (desplazamiento): 10 grados Eje giran x inclinado (lugar): -4 grados transforma el eje inclinado (flotadores): -4 grados

Esto se encarga de los efectos del viaje uno por uno. Ahora debemos agregar el efecto de desplazamiento al módulo de llamada a acción que completará el diseño. Efectos de mover el módulo de acción para la acción Abra la configuración del módulo de llamadas de acción y dale un efecto de sombreado en el cuadro de la siguiente manera: Box Sombra: Consulte el cuadro horizontal de captura de pantalla del cuadro: 0 PX Box Sombra Poseía vertical: 0 PX (predeterminado ), 30 px (flotante) Color de sombra: #ffffff en este último, agregue una escala, gire e incline la propiedad de transformación en el desplazamiento de la siguiente manera: eje x e y de transformación (flotador): 115% de transformación de rotación Eje z (flotante) : 9 grados giran el eje x inclinado (flotante): 3deg transforma el eje inclinado (flotante): 3deg El tamaño del módulo que usa la escala al flotador ayudará a minimizar las posibilidades de que el usuario pase sobre el elemento en lugar de el módulo.
El resultado final aquí es el resultado final del efecto flotante abstracto. Observe cómo se activan tanto los efectos del viaje uno por uno como el movimiento del módulo cuando se viajan para distorsionar los elementos para un diseño abstracto.

Así es como se verá el efecto flotante en los dispositivos móviles. Sin embargo, debido a que la mayoría de los navegadores móviles requieren un toque para activar el efecto de desplazamiento, es posible que desee deshabilitar el efecto de desplazamiento en los dispositivos móviles para evitar que el usuario alcance dos veces si usa el módulo como un enlace.

Efectos flotantes abstractos para un impulso (ejemplo 2) de comenzar el proyecto con el próximo efecto abstracto, para duplicar la sección que contiene nuestro primer ejemplo. Ahora todo lo que tenemos que hacer es hacer algunos ajustes de diseño menores y flotar para un diseño único. Actualice la configuración de la fila primero, actualice la configuración de la fila de la siguiente manera: rotar la transformación del eje z: -5 grados del eje giran x e y inclinado: -4 Gradivate la configuración del módulo de acción ahora para cambiar la configuración del módulo de la siguiente manera: Primero, elimine el borde … el ancho del borde: 0 px

Luego actualice la sombra de la caja de la siguiente manera: Box Sombra Horizontal Posición: 0 PX Box Sombra Posición vertical: 110 PX (Haga y desactive el efecto de desplazamiento heredado del diseño anterior) Sombra: # FFB238

Ahora podemos actualizar nuestros efectos de transformación de propiedades. Aquí, prácticamente, reducimos un poco la escala y agregamos valores negativos a nuestras propiedades de rotación e inclinación anteriores para mover el elemento en la dirección opuesta durante el viaje. Actualización de las siguientes opciones de transformación: eje x e y (plano): 110% de transformación de rotación z (desplazamiento): -9 grados giros x inclinado (flotante): -3 grados transforma el eje inclinado (-3 grados

Creación de una apariencia de cuadrícula para sus líneas porque este diseño requiere una giro de los padres alrededor del módulo y tiene la misma altura y ancho, realmente no tiene la capacidad de crear una apariencia de columna como lo haría normalmente, con todo esto, puede usar Flexione la propiedad para alinear sus filas horizontalmente en una apariencia de la cuadrícula. Para hacer esto, primero duplique el giro que contiene su módulo varias veces, por lo que tiene tres líneas en una sección. Luego agregue un margen personalizado a cada una de las filas: Margen personalizado: 50 PX hacia arriba, 50 PX hacia abajo y luego abra la configuración de la sección y simplemente agregue el siguiente CSS personalizado al elemento principal. Pantalla: Flex;

Flex-Wrap: envoltura;

Ahora tiene tres columnas de fila que responderán al tamaño del navegador.

Los pensamientos finales que giran varios elementos en Hover ofrecen otro nivel de creatividad que puedes explorar. Los ejemplos en este tutorial han sido destinados a mostrarle lo que es posible, pero no dude en cambiar los diseños para su propio proyecto. Como era de esperar, puede volverse lo suficientemente loco si lo desea. Pero también puede ser un poco más conservador para crear un elemento de diseño de interacción sutil, como el ejemplo del módulo de imagen en este tutorial. Espero tener noticias suyas en los comentarios. ¡Suerte!