Cómo agregar efectos de inclinación de desplazamiento a cualquier elemento en Divi
Publicado: 2021-08-12Agregar 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 con Tilt.js (un efecto de inclinación de desplazamiento ligero para jQuery). Con Tilt.js, puede aplicar fácilmente efectos de desplazamiento del mouse 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 en 3D.
¡Empecemos!
Vistazo
Para obtener 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 crearemos en este tutorial.
Descarga el diseño GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Conceptos básicos para usar Tilt.js
Tilt.js es un efecto de inclinación de desplazamiento de paralaje ligero 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 accede a la biblioteca tilt.js, puede agregar una clase CSS al elemento que desea inclinar y luego usar un fragmento de jQuery simple para aplicar la función de inclinación en un objeto jQuery con la misma clase .
Por ejemplo, digamos 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.
$(".et-js-tilt").tilt();
Luego, puede establecer opciones adicionales para el efecto de inclinación. Por ejemplo, puede agregar un efecto de escala y deslumbramiento con el siguiente fragmento de código.
$(".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 tarde.
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 desplazamiento de inclinación a los módulos Divi
Agregue una fila de tres columnas a la sección regular predeterminada.
Agregar módulo de imagen
En la primera columna, agregue un módulo de imagen.
Nota: puede utilizar cualquier módulo que desee. No tiene por qué 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 tilt.js JQuery
Para agregar la biblioteca tilt.js y el fragmento de código necesarios para inclinar nuestras imágenes, usaremos 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, necesitamos acceder a la biblioteca 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 la siguiente secuencia de comandos en el cuadro de código.
Utilice el siguiente src dentro de una etiqueta de secuencia de comandos para importar la biblioteca:
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 .
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 980px. 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 completa. 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.
He aquí cómo hacerlo.
Duplicar fila y agregar una 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.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});
Observe que para este efecto de inclinación, devolvimos la escala 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 cursor 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 efecto de inclinación anidadas.
Adición de un efecto de desplazamiento de inclinación a una columna con varios 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 tener todos esos elementos inclinados 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 anterior de imágenes.
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:
<h2>Local Organic</h2>
Luego actualice los estilos de encabezado 2 de la siguiente manera:
- Fuente del título 2: Berkshire Swash
- Alineación del texto del encabezado 2: centro
- Color del texto del encabezado 2: # 000000
- Tamaño del texto del encabezado 2: 60 px (escritorio), 32 px (tableta), 20 px (teléfono)
- Altura de línea de rumbo 2: 1.2em
Agregar módulo de botones
Debajo del Módulo de texto, agregue un módulo de botones.
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: centrador
- 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: 100 px
- Fuente del botón: Quicksand
- Peso de la fuente del botón: negrita
- Relleno: 16 píxeles en la parte superior, 16 píxeles en la parte inferior, 30 píxeles a la izquierda, 30 píxeles a la derecha
- Box Shadow: 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: 50 px (arriba y abajo), 20 px (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 apunta a la clase CSS de la columna. Pegue el siguiente fragmento debajo del fragmento anterior orientado a la fila.
$(".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 transformación: translateZ () , podemos hacer que cada uno de los módulos dentro de la columna salga en el espacio 3D cuando el efecto de desplazamiento del mouse está activo.
He aquí cómo hacerlo.
Fila anterior duplicada
Primero, duplique la fila anterior con el efecto de inclinación agregado a la columna del medio.
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:
transform-style: preserve-3d;
Agrega jQuery y CSS
Luego, agregue algunos fragmentos más de jQuery en el fragmento de función de inclinación anterior dirigido a la columna de la siguiente manera:
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 básica de inclinación a la columna como en el ejemplo anterior. Sin embargo, el código también alterna una nueva clase ("tilt-active") a la columna siempre que el efecto de tilt está activo. Podemos usar esta nueva clase para aplicar un valor transform: translateZ () a cada uno de los módulos al pasar el cursor 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.
.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 emergen 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 del hover 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 tener noticias tuyas en los comentarios.
¡Salud!