¿Le gustaría agregar un efecto de inclinación con Divi en algún elemento de tu página?
Adición de efectos de inclinación de desplazamiento a su Sitio web es una de esas maneras divertidas y atractivas de traer su Sitio web Divi. Por lo general, este tipo de diseño requiere un complemento o un código más avanzado. 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 al pasar el cursor a cualquier elemento de Divi. Usando una combinación de fragmentos de jQuery inclinable.js y el constructor Divi, le mostraremos cómo agregar increíbles efectos de inclinación al pasar el cursor a una imagen, columna de módulo, fila, etc.
Incluso le mostraremos cómo agregar sorprendentes efectos de paralaje 3D.
Vamos a empezar!
vista
Aquí hay una descripción general rápida del resultado que obtendremos en este tutorial.
Ver también: Divi: cómo revelar contenido al pasar el cursor sobre el divisor de sección
Lo que necesitas para empezar
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Agregue efectos de inclinación al pasar el mouse sobre cualquier elemento en Divi
Agregue un efecto Tilt Hover a los módulos Divi
Comencemos agregando una fila de tres columnas a la sección regular predeterminada.
Agregar un módulo de imagen
En la primera columna, agregue un módulo Imagen.
Nota: Puede utilizar cualquier módulo de su elección. No tiene que ser un módulo de imagen en absoluto.
Sube una imagen de tu elección.
Agregar una clase de módulo de imagen
En la pestaña Avanzado, 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.
Módulo Copiar y Pegar Imagen Anterior
A continuación, copie el módulo 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 pertenezca a la clase CSS "et-js-inclinación".
Agregue la biblioteca JQuery "tilt.js"
Para agregar la biblioteca inclinación.js y el fragmento de código necesario para sesgar nuestras imágenes, usaremos un módulo de código.
Primero, agregue una nueva fila una columna debajo de la fila existente.
Luego agregue un módulo de Código a la nueva línea.
Entonces necesitamos acceder a la biblioteca tilt.js agregando un script que importa 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 código src en 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 inclinación.js antes de agregar el código que lo usará. Entonces, después de que el script apunte a inclinación.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 declaración if que se ejecutará cuando el ancho del navegador sea mayor a 980px. Esto asegurará que el efecto solo ocurra en una computadora de escritorio.
Aquí está el resultado.
Se agregó el efecto de desplazamiento de inclinación a la línea
Como mencionamos antes, puede agregar este efecto de inclinación de desplazamiento a cualquier elemento Divi. Esto incluye una línea 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.
Duplique la línea y agregue una clase CSS única a la línea
Duplique la fila de imágenes existente, luego abra la configuración de la fila duplicada. Debajo de la pestaña Avanzado, asigne a la línea 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 sesgo anterior para aplicar una función de sesgo separada a la línea.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Tenga en cuenta que para este efecto de inclinación, hemos reducido la escala a 1 y aumentado 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 cuando pasa 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.
Agregue un efecto Tilt Hover a una columna con varios módulos Divi
En algunos casos, es útil agregar un efecto de sesgo a una columna de módulos. Esto le permitirá diseñar múltiples módulos en una columna con Divi y luego tener todos esos elementos en ángulo como una sola unidad.
Para darle un ejemplo de cómo hacer esto, vamos a agregar un efecto de inclinación al pasar el mouse por encima de una columna que contiene un módulo de Imagen, un módulo de Texto y un módulo de Botón.
Añadir una nueva linea
Para comenzar, cree una nueva fila con la siguiente estructura de columnas:
Agregar un módulo de imagen
Dentro de la columna 2 (la columna del medio), agregue un nuevo módulo Imagen.
Sube una imagen al módulo.
Establezca la alineación de la imagen al centro.
Agregar un módulo de texto
Debajo del módulo Imagen, agregue un módulo Texto con el siguiente encabezado H2:
<h2>Local Organic</h2>
A continuación, actualice los estilos de encabezado H2 de la siguiente manera:
- Fuente: Berkshire Swash
- Alineación de texto: centrado
- Color del texto: #000000
- Tamaño: 60px
- Altura de la línea: 1,2 cm
Agregar módulo de botones
Debajo del módulo Texto, agregue un módulo Botón.
Actualice el texto del botón para que diga "Más información..."
Actualice la configuración de personalización de la siguiente manera:
- Alineación de botones: Centro
- Usar estilos personalizados para el botón
- Tamaño del texto del botón: 18px
- Color del texto: #fff
- Fondo del botón: #000
- Ancho del borde del botón: 0 píxeles
- Radio del borde: 100px
- Fuente del botón: Arena movediza
- Peso de fuente: Negrita
- Relleno (superior e inferior): 16 px
- Relleno (izquierdo y derecho): 30px
- Sombra de caja: ver captura de pantalla
Parámetros de la columna
Una vez que los tres módulos estén completos, abra la configuración de la columna principal de esos módulos (columna 2) y actualice lo siguiente:
- Fondo: #f5cee6
- Relleno (superior e inferior): 50 px
- Relleno (izquierdo y derecho): 20px
Agregar clase CSS a la columna
En la pestaña avanzada, agregue la siguiente clase CSS:
- Clase CSS: et-column-js-tilt
Se agregó jQuery para aplicar el efecto de inclinación a la columna.
Para agregar el efecto de sesgo a la columna, podemos agregar otro fragmento de jQuery similar que apunte a la columna Clase CSS.
Pegue el siguiente fragmento de código debajo del fragmento de código anterior que apunta a la línea.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
Aquí está el resultado final.
Añadido efecto de paralaje 3D a los componentes internos.
Para un efecto de inclinación de desplazamiento más avanzado, podemos agregar un efecto de paralaje 3D a los módulos de columna internos.
Usando una combinación de perspectiva y transform:translateZ() , podemos hacer que cada uno de los módulos de la columna aparezca en el espacio 3D cuando el efecto de inclinación al pasar el mouse está activo.
He aquí cómo.
Duplicar línea anterior
Primero, duplique la fila anterior con el efecto de sesgo agregado a la columna central.
Agregar una sola clase de columna
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 de la columna principal:
transform-style: preserve-3d;
Agregar jQuery y CSS
A continuación, agregue algunos fragmentos de jQuery más debajo del fragmento de función de sesgo 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 de inclinación básica a la columna, al igual que el ejemplo anterior.
.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 aparecen los tres módulos en el espacio 3D a medida que giran durante el efecto de inclinación.
Lea también: Divi: cómo revelar contenido al pasar el cursor sobre el divisor de sección
Resultados finales
Aquí hay otro vistazo a los resultados finales de nuestros ejemplos.
Descarga DIVI ahora!!!
Conclusión
Los efectos de inclinación de desplazamiento que ofrece Inclinación.js son muy divertidos para experimentar.
Aunque hemos usado algunos ejemplos básicos en este tutorial, puede tener un día de campo fácilmente aplicando estos efectos de inclinación de desplazamiento a uno de nuestros diseños prefabricados o a su propio sitio.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
