Cómo agregar los efectos de inclinación del cursor a cualquier elemento en la división

Agregar los efectos de inclinación del cursor a su diseño web es una de esas formas divertidas y cautivadoras de dar vida a su sitio web Div. Por lo general, este tipo de diseño requiere un complemento o código más avanzado (como en este tutorial). Pero este proceso es mucho más fácil usando tilt.js (un efecto de inclinación fácil para JQuey). Con Tilt.js, puede aplicar fácilmente los efectos de inclinación del cursor a cualquier cosa en unos minutos. En este tutorial, le mostraremos cómo agregar efectos de inclinación a cualquier elemento en la división. Usando una combinación de fragmentos de jquey tilt.js y el constructor de divi, le mostraremos cómo agregar efectos de inclinación impresionantes a una imagen, una columna de módulos, una fila y muchos más. Incluso le mostraremos cómo agregar efectos de paralaje 3D sorprendentes.
¡Vamos a empezar! Ojo para una demostración en vivo de la funcionalidad detrás de este tutorial, vea este CodePen. Aquí hay un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. 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 aparición de la sección en la Biblioteca de la Divica, navegue en la Biblioteca de la Divica.
Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar.
Después de haber terminado, la aparición de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Nociones básicas para usar tilt.js
Tilt.js es un efecto de propina fácil del paralaje para JQuey. Con solo unas pocas líneas de jQuery, puede agregar efectos de inclinación a cualquier elemento en la página. Viene con hasta 10 opciones (ver 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 ceguera. 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 el volumen y luego usar un fragmento JQuey simple para aplicar la función de inclinación en un objeto jquey con la misma clase. Por ejemplo, suponga que agrega una clase CSS personalizada a un módulo de imagen llamado “ET-JS-Tilt”.

Todo lo que tiene que hacer después es agregar el próximo fragmento de jquey para agregar el efecto inclinado del flotante a la imagen. $ (“. et-js-tilt”). tilt ();
Luego puede establecer opciones adicionales para el efecto de inclinación. Por ejemplo, puede agregar una escala y un efecto de brillo con el siguiente fragmento de código. $ (“. Et-JS-Tilt”). Tilt ({

Giro: verdadero,
MaxGlare: 0.7,
Escalas: 1.1
});
El resultado sería este … Para un efecto más avanzado, puede agregar Transform: TranslateZ () a cualquier niño para lograr un efecto de paralaje 3D. Más sobre esto más tarde.
Ahora que tenemos una comprensión básica sobre cómo usar tilt.js, exploremos cómo usarlo en el div. Cómo agregar los efectos de inclinación del cursor a cualquier elemento en la división de un efecto de inclinación de inclinación a los módulos de la Divica Agregue una fila con tres columnas a la sección predeterminada habitual.
Agregue un módulo de imagen a 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. Lleve una imagen de su elección. Utilizo uno de los paquetes de paquete para galletas caseras.
Agregue la clase del 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.

Copie y pegue los módulos de imagen y luego, copie el módulo de imagen y pegue uno en cada una de las dos columnas restantes.
Puede reemplazar imágenes duplicadas por otras nuevas si lo desea. Asegúrese de que cada módulo de imagen tenga la clase CSS “ET-JS-Tilt”. Agregue tilt.js jquey para agregar la biblioteca tilt.js y el fragmento de código necesario para inclinar nuestras imágenes, usaremos un módulo de código. Primero, agregue una nueva fila con una columna debajo de la fila existente.
Luego agregue un módulo de código a la nueva fila.

Luego necesitamos acceder a la biblioteca tilt.js agregando un script que importa tilt.js desde su cdn (https://cdnjs.cloudflare.com/ajax/lbs/tilt.js/1.2.1/tilt.jquery. Min. .js). Pegue el siguiente script en el cuadro de código. Use el siguiente src en una etiqueta de script para importar la biblioteca: src = “https://cdnjs.cloudflare.com/ajax/lbs/tilt.js/1.2.1/tilt.jquery.min.js” debería mostrar de esta manera :

Es importante importar tilt.js antes de agregar el código que lo usará. Entonces, después de que el script que indique tilt.js, agregue las etiquetas de script necesarias para envolver la jQuery que debemos agregar. Luego pegue la siguiente jQuery entre etiquetas de guiones.

JQuery (documento) .Ready (function ($) {

If ($ (ventana) .width ()> 980) {

$ (“. Et-JS-Tilt”). Tilt ({Glare: True,
MaxGlare: 0.7,
Escamas: 1.1,
Perspectivas: 300,
});
}
});
Tenga en cuenta que la función tilt () está en una instrucción IF que se realizará cuando el ancho del navegador sea mayor que 980px. Esto le asegurará que el efecto solo ocurre en el escritorio. Aquí está el resultado. Agregar un efecto de inclinación en una fila Como mencioné anteriormente, puede agregar este efecto de inclinación a cualquier elemento en el DIV. Esto incluye una fila completa. Además, puede agregar un efecto de inclinación en una fila, mientras mantiene los efectos de inclinación para cada uno de los módulos dentro de la fila.
Aquí le mostramos cómo hacerlo. Duplique la fila y agregue una clase CSS única en una fila Duplicar la fila de imágenes existente y luego abra la configuración de la fila duplicada. En la pestaña Avanzada, le dé a la fila una clase CSS única, de la siguiente manera:
Clase CSS: ET-Row-JS-Tilt
Agregue jQuey y luego agregue el siguiente jquey debajo de la función de inclinación anterior para aplicar una función de inclinación por separado a la fila. $ (“. Et-Row-JS-Tilt”). Tilt ({


Escala: 1,
Perspectivas: 1200,
});

Tenga en cuenta que para este efecto de inclinación, llevé la escala a 1 y aumenté el valor de la perspectiva, de modo que la inclinación es más sutil.
Aquí está el resultado. Observe cómo el giro tiene una función de inclinación que se activa cuando pasa sobre la fila y cada uno de los módulos de imagen también tiene el mismo efecto de inclinación que he agregado anteriormente. Esta es la forma en que puede aplicar instancias con efecto de inclinación vestida. Agregar un efecto tumble a una columna múltiple en algunos casos es útil para agregar un efecto de inclinación a una columna del módulo. Esto le permitirá diseñar múltiples módulos en una columna con DIV y luego inclinar todos esos elementos como una sola unidad. Para darle un ejemplo de cómo hacer esto, agregaremos un efecto de inclinación de columna con un módulo de imagen, módulo de texto y un módulo de botón. Agregue una nueva fila para comenzar, cree un nuevo chasis dos tercios de chasis de columna debajo de la fila anterior de imágenes. Agregue un módulo de imagen en la columna 2 (la columna central), agregue un nuevo módulo de imagen.
Cargue una imagen en el modo y establezca la alineación de la imagen en el centro.
Agregue un módulo de texto en el módulo de imagen, agregue un módulo de texto con el siguiente título H2:

Organic Local

Luego actualice los estilos del Título 2 de la siguiente manera:
Título de la fuente 2: Berkshire Swash

Título 2 Alineación de texto: Centro

Rúbrica 2 Color de texto: # 000000

Título 2 Dimensión de texto: 60 PX (escritorio), 32 PX (tableta), 20 PX (teléfono)

Título 2 Altura de la línea: 1.2em
Agregue un botón en el 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 de texto de texto: 18 PX
El color del texto del botón: #fff
El color del fondo del botón: # 000 el nudo del botón: 0 PX

Botón Raza: 100 PX
Botón de fuente: arena actual
Botón de peso de fuente de fuente: en negrita
Revestimiento: 16 px arriba, 16 px abajo, 30 px izquierda, 30 px a la derecha
Box Shadow: Ver captura de pantalla
Configuración de la columna Después de que se acaben los tres módulos, abra la configuración para la columna principal de estos módulos (columna 2) y actualice lo siguiente:
Color de fondo: # F5CEE6
Revestimiento: 50 px (arriba y abajo), 20 px (izquierda y derecha)
Agregar clase CSS a la columna en la pestaña Avanzada, agregue la siguiente clase CSS:
Clase CSS: ET-Column-JS-Tilt
Agregando jQuery para aplicar un efecto de inclinación de columna para agregar el efecto de inclinación a la columna, podemos agregar otro fragmento similar de jQuery que se dirige a la columna de la clase CSS. Pegue el siguiente fragmento debajo del fragmento anterior que se dirige a la fila. $ (“. et-column-js-tilt”). TILT ({

Escamas: 1.1,
Perspectivas: 1000,

});

Aquí esta el resultado final. Agregando el efecto paralaje 3D a los elementos interiores para un efecto de inclinación flotante más avanzado, podemos agregar un efecto paralelo 3D a los módulos interiores de la columna. Usando una combinación de perspectiva y transformación: traducez (), podemos hacer que cada uno de los módulos de columna salga en el espacio 3D cuando el efecto inclinado del flotador está activo. Aquí le mostramos cómo hacerlo. Duplique primero la fila anterior, copie la fila anterior con el efecto de inclinación agregado a la columna central.
Agregue una clase de columna única y luego actualice la columna central (columna 2) con una clase CSS única de la siguiente manera:

Clase CSS: ET-Column-JS-Tilt-3D
CSS personalizados Para garantizar que los módulos interiores mantengan el efecto 3D, agregue los siguientes CSS personalizados al elemento principal de la columna: Estilo de transformación: Preserve-3D; Agregue jquey y CSS y luego agregue algunos fragmentos de jQuery debajo del fragmento anterior de columna de orientación de la función de inclinación de la siguiente manera: const columntilt3d = $ (“. et-column-js-tilt-3d”). tilt ({
Escamas: 1.1,
Perspectivas: 1000,

});

ColumnTilt3d.on (“tilt.museenter”, function (s) {
$ (E.Target) .AddClass (“Tilt-Actives”);

});

ColumnTilt3d.on (“tilt.mousleave”, function (s) {
$ (e.target) .removeclass (“tilt-actives”);
});
Este jquey agrega otra función de inclinación básica de la columna como el ejemplo anterior. Sin embargo, el código también cambia una nueva clase (“inclinación-activa”) en la columna siempre que el efecto de inclinación esté activo. Podemos usar esta nueva clase para aplicar un valor de transformación: traducir () cada uno de los módulos cuando pasa 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 CSS en las etiquetas de estilo necesarias. .et-column-js-tilt-3d.tilt-active .et_pb_image {
Transform: traducez (100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
Transformación: traducez (40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
Transformación: traducez (50px);
}