Agregar efectos de inclinación de desplazamiento a su diseño web es una de esas formas divertidas y atractivas de darle vida a su sitio web Divi . Por lo general, este tipo de diseño requiere un complemento o un código más avanzado (como en este tutorial ). Pero, este proceso es mucho más fácil usando Tilt.js (un ligero efecto de inclinación de desplazamiento para jQuery). Con Tilt.js, puede aplicar fácilmente efectos de inclinación de desplazamiento a cualquier cosa en minutos.
En este tutorial, le mostraremos cómo agregar efectos de inclinación de desplazamiento a cualquier elemento en Divi. Usando una combinación de fragmentos de jQuery de tilt.js y el constructor Divi, le mostraremos cómo agregar impresionantes efectos de inclinación de desplazamiento a una imagen, una columna de módulos, una fila y más. Incluso le mostraremos cómo agregar sorprendentes efectos de paralaje 3D.
¡Empecemos!
Para ver una demostración en vivo de la funcionalidad detrás de este tutorial, consulte este codepen .
Y aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Los conceptos básicos para usar Tilt.js
Tilt.js es un ligero efecto de inclinación de desplazamiento de paralaje para jQuery. Con solo un par de líneas de jQuery, puede agregar efectos de inclinación de desplazamiento a cualquier elemento de la página. Viene con hasta 10 opciones ( consulte la documentación ) que se pueden agregar fácilmente para controlar el diseño y la funcionalidad del efecto de inclinación, incluida la escala y un hermoso efecto de deslumbramiento .
En el nivel más básico, una vez que acceda a la biblioteca tilt.js, puede agregar una clase CSS al elemento que desea inclinar al pasar el mouse y luego usar un fragmento jQuery simple para aplicar la función de inclinación en un objeto jQuery con la misma clase .
Por ejemplo, supongamos que agrega una clase CSS personalizada a un módulo de imagen llamado «et-js-tilt».
Todo lo que necesita hacer después de eso es agregar el siguiente fragmento de jQuery para agregar el efecto de inclinación de desplazamiento a la imagen.
|
01
|
$(".et-js-tilt").tilt(); |
Luego puede configurar opciones adicionales para el efecto de inclinación. Por ejemplo, puede agregar un efecto de escala y resplandor con el siguiente fragmento de código.
|
01
02
03
04
05
|
$(".et-js-tilt").tilt({ glare: true, maxGlare: 0.7, scale: 1.1}); |
El resultado sería este…
Para un efecto más avanzado, puede agregar transform:translateZ() a cualquier elemento secundario para obtener un efecto de paralaje 3D. Más sobre eso más adelante.
Ahora que tenemos una comprensión básica de cómo usar tilt.js, exploremos cómo usarlo en Divi.
Cómo agregar efectos de inclinación de desplazamiento a cualquier elemento en Divi
Agregar un efecto de inclinación y desplazamiento a los módulos Divi
Agregue una fila de tres columnas a la sección normal predeterminada.
Agregar módulo de imagen
En la primera columna, agregue un módulo de imagen.
Nota: Puede usar cualquier módulo que desee. No tiene que ser un módulo de imagen.
Sube una imagen de tu elección. Estoy usando uno del paquete de diseño de galletas caseras.
Agregar clase de módulo de imagen
En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-js-tilt
Esta clase se utilizará como selector para nuestra función de inclinación más adelante.
Copiar y pegar módulos de imagen
A continuación, copie el módulo de imagen y pegue uno en cada una de las dos columnas restantes.
Puede reemplazar las imágenes duplicadas por otras nuevas si lo desea. Solo asegúrese de que cada módulo de imagen tenga la clase CSS «et-js-tilt».
Agregue el JQuery de tilt.js
Para agregar la biblioteca tilt.js y el fragmento de código necesario para inclinar nuestras imágenes, vamos a usar un módulo de código.
Primero, agregue una nueva fila de una columna debajo de la fila existente.
Luego agregue un módulo de código a la nueva fila.
A continuación, debemos acceder a la biblioteca de tilt.js agregando un script que importe tilt.js desde su CDN (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Pegue el siguiente script en el cuadro de código.
Use el siguiente src dentro de una etiqueta de secuencia de comandos para importar la biblioteca:
|
01
|
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js" |
Debe tener un aspecto como este:
Es importante importar tilt.js antes de agregar el código que lo usará. Entonces, después de que el script apunte a tilt.js, agregue las etiquetas de script necesarias para envolver el JQuery que necesitamos agregar. Luego pegue el siguiente JQuery entre las etiquetas del script .
|
01
02
03
04
05
06
07
08
09
10
11
12
|
jQuery(document).ready(function ($) { if ($(window).width() > 980) { $(".et-js-tilt").tilt({ glare: true, maxGlare: 0.7, scale: 1.1, perspective: 300, }); }}); |
Tenga en cuenta que la función tilt() está dentro de una instrucción if que se ejecutará cuando el ancho del navegador sea superior a 980 px. Esto asegurará que el efecto solo ocurra en el escritorio.
Aquí está el resultado.
Agregar un efecto de desplazamiento de inclinación a la fila
Como mencionamos anteriormente, puede agregar este efecto de inclinación de desplazamiento a cualquier elemento en Divi. Esto incluye una fila entera. Además, puede agregar un efecto de inclinación a una fila mientras mantiene los efectos de inclinación para cada uno de los módulos dentro de la fila.
Aquí está cómo hacerlo.
Duplicar fila y agregar clase CSS única a la fila
Duplique la fila de imágenes existente y luego abra la configuración de la fila duplicada. En la pestaña avanzada, asigne a la fila una Clase CSS única de la siguiente manera:
- Clase CSS: et-row-js-tilt
Agregar jQuery
Luego agregue el siguiente jQuery debajo de la función de inclinación anterior para aplicar una función de inclinación separada a la fila.
|
01
02
03
04
|
$(".et-row-js-tilt").tilt({ scale: 1, perspective: 1200,}); |
Tenga en cuenta que para este efecto de inclinación, llevamos la escala de nuevo a 1 y aumentamos el valor de perspectiva para que la inclinación sea más sutil.
Aquí está el resultado.
Observe cómo la fila tiene una función de inclinación que se activa al pasar el mouse sobre la fila y cada uno de los módulos de imagen también tiene el mismo efecto de inclinación que agregamos anteriormente. Así es como puede aplicar instancias de efectos de inclinación anidados.
Agregar un efecto de desplazamiento de inclinación a una columna con múltiples módulos Divi
En algunos casos, es útil agregar un efecto de inclinación a una columna de módulos. Esto le permitirá diseñar múltiples módulos dentro de una columna con Divi y luego hacer que todos esos elementos se inclinen como una sola unidad. Para darle un ejemplo de cómo hacer esto, vamos a agregar un efecto de desplazamiento de inclinación a una columna con un módulo de imagen, un módulo de texto y un módulo de botón.
Agregar nueva fila
Para comenzar, cree una nueva fila de columna de un sexto, dos tercios, un sexto debajo de la fila de imágenes anterior.
Agregar módulo de imagen
Dentro de la columna 2 (la columna del medio), agregue un nuevo módulo de imagen.
Cargue una imagen en el módulo y establezca la alineación de la imagen en el centro.
Agregar módulo de texto
Debajo del módulo de imagen, agregue un módulo de texto con el siguiente encabezado H2:
|
01
|
<h2>Local Organic</h2> |
Luego actualice los estilos del encabezado 2 de la siguiente manera:
- Tipo de letra del título 2: Berkshire Swash
- Encabezado 2 Alineación de texto: Centro
- Título 2 Color del texto: #000000
- Título 2 Tamaño del texto: 60 px (escritorio), 32 px (tableta), 20 px (teléfono)
- Encabezado 2 Altura de línea: 1,2 em
Agregar módulo de botones
Debajo del Módulo de texto, agregue un módulo de botón.
Actualice el texto del botón para leer «Acerca de nosotros» y actualice la configuración de diseño de la siguiente manera:
- Alineación de botones: centerr
- Tamaño del texto del botón: 18px
- Color del texto del botón: #fff
- Color de fondo del botón: #000
- Ancho del borde del botón: 0px
- Radio del borde del botón: 100px
- Fuente del botón: Arena movediza
- Peso de la fuente del botón: Negrita
- Relleno: 16 px arriba, 16 px abajo, 30 px izquierda, 30 px derecha
- Sombra de caja: ver captura de pantalla
Configuración de columna
Una vez que los tres módulos estén terminados, abra la configuración de la columna principal de esos módulos (columna 2) y actualice lo siguiente:
- Color de fondo: #f5cee6
- Relleno: 50px (arriba y abajo), 20px (izquierda y derecha)
Agregar la clase CSS a la columna
En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-column-js-tilt
Agregar jQuery para aplicar un efecto de inclinación a la columna
Para agregar el efecto de inclinación a la columna, podemos agregar otro fragmento similar de jQuery que apunte a la clase CSS de la columna. Pegue el siguiente fragmento debajo del fragmento anterior que apunta a la fila.
|
01
02
03
04
|
$(".et-column-js-tilt").tilt({ scale: 1.1, perspective: 1000,}); |
Aquí esta el resultado final.
Agregar efecto de paralaje 3D a elementos internos
Para un efecto de inclinación de desplazamiento más avanzado, podemos agregar un efecto de paralaje 3D a los módulos internos de la columna. Usando una combinación de perspectiva y transform:translateZ() , podemos hacer que cada uno de los módulos dentro de la columna aparezca en el espacio 3d cuando el efecto de inclinación de desplazamiento está activo.
Aquí está cómo hacerlo.
Fila anterior duplicada
Primero, duplique la fila anterior con el efecto de inclinación agregado a la columna central.
Agregar clase de columna única
Luego actualice la columna del medio (columna 2) con una Clase CSS única de la siguiente manera:
- Clase CSS: et-column-js-tilt-3d
CSS personalizado
Para asegurarse de que los módulos internos conserven el efecto 3D, agregue el siguiente CSS personalizado al elemento principal de la columna:
|
01
|
transform-style: preserve-3d; |
Agregar jQuery y CSS
Luego, agregue algunos fragmentos más de jQuery debajo del fragmento de función de inclinación anterior apuntando a la columna de la siguiente manera:
|
01
02
03
04
05
06
07
08
09
10
|
const columnTilt3d = $(".et-column-js-tilt-3d").tilt({ scale: 1.1, perspective: 1000,});columnTilt3d.on("tilt.mouseEnter", function (e) { $(e.target).addClass("tilt-active");});columnTilt3d.on("tilt.mouseLeave", function (e) { $(e.target).removeClass("tilt-active");}); |
Este jQuery agrega otra función de inclinación básica a la columna como en el ejemplo anterior. Sin embargo, el código también cambia una nueva clase («tilt-active») a la columna siempre que el efecto de inclinación esté activo. Podemos usar esta nueva clase para aplicar un valor transform: translateZ() a cada uno de los módulos al pasar el mouse sobre la columna. Esto creará el efecto de paralaje 3d emergente.
Para hacer esto, agregue el siguiente CSS personalizado en la parte superior del cuadro de código/contenido asegurándose de envolver el CSS en las etiquetas de estilo necesarias.
|
01
02
03
04
05
06
07
08
09
|
.et-column-js-tilt-3d.tilt-active .et_pb_image { transform: translateZ(100px);}.et-column-js-tilt-3d.tilt-active .et_pb_text { transform: translateZ(40px);}.et-column-js-tilt-3d.tilt-active .et_pb_button { transform: translateZ(50px);} |
Ahora mira el resultado final. Observe cómo los tres módulos aparecen en el espacio 3D a medida que giran durante el efecto de inclinación.
Resultados finales
Aquí hay otro vistazo a los resultados finales de nuestros ejemplos.
Pensamientos finales
Es realmente divertido experimentar con los efectos de inclinación de desplazamiento que ofrece Tilt.js. Aunque utilicé algunos ejemplos básicos en este tutorial, fácilmente podría tener un día de campo aplicando estos efectos de inclinación de desplazamiento a cualquiera de nuestros diseños prefabricados o en su propio sitio. ¡Disfrutar!
Espero escuchar de usted en los comentarios.
¡Salud!