Efecto ondulado único para repetantes de constructor de oxígeno

En este tutorial, crearemos un efecto de desplazamiento único para el contenido que se muestra en los repetidores Oxygen Builder. Modelado basado en el “efecto de distorsión flotante” CODROPS y utilizando el código fuente de ese recurso, este efecto creará un desenfoque distorsionado en una imagen definida por el usuario cuando un visitante pasa en una celda repetida. Este tutorial incorporará algunos conceptos interesantes de oxígeno:
Técnicas de repetición avanzada
Grupos de campo ACF e integración manual con oxígeno Builder
Cuadrícula CSS básica
Atributos dinámicos
Uso de bloques de código y JS intermedio
Dando un paso más allá, lo convertiremos en una característica 100% dinámica, lo que significa que será establecido y olvidado. ¡No es necesario inicializar un efecto específico para cada celda!
Siga el Siga (Descargar fuente): Nota: Esta es una prueba del concepto y probablemente requiere optimización para su uso en los sitios de producción. Otras dos cosas:
Lanzamos un curso de oxígeno. Puede obtener más información aquí y puede registrarse en la lista de espera.
Este fue un tutorial solicitado en nuestro maravilloso grupo de Facebook. ¡Nos encantaría unirnos!
Efecto de demostración:

Paso 1: ACF Fields Utilizaremos ACF para que este 100% dinámico y fácil de editar para el usuario final. Cree un grupo de campos y agregue una imagen de pase y una imagen de movimiento. La imagen inicial será la imagen presentada. La imagen de pasar con el mouse es lo que el efecto se desvanecerá cuando el visitante pase con el mouse sobre un poste repetitivo.
La imagen movida es la que se utilizará para hacer la animación única de transformación/decoloración entre las dos imágenes.En este ejemplo, usamos las siguientes imágenes para viajar: de hecho, puede usar cualquier imagen, pero las imágenes en blanco y negro con una excelente textura suelen ser las mejores.¡Es fácil experimentar este método!


Cree un grupo de campos y asigne al tipo de publicación.

Cada formato de retorno de imagen debe ser la imagen de la imagen.Así es como se ven el grupo de campo y las imágenes asociadas cuando agrega una nueva publicación:

Es fácil cambiar cualquiera de las tres imágenes.Paso 2: Cree la estructura del efecto en esencia, copie el código fuente del ejemplo de Codrops, con cambios menores.

! -IMG “data-Discplacement =” img/dispolaemacment/8.jpg “data-intensity =”-0.65 “data-speedin =” 1.2 “data-s-s-speDout =” 1.2 “>


-> California

saltando

Los últimos espacios vacíos en California descubren más

Simplemente duplique la estructura HTML anterior, con elementos de constructor de oxígeno. Recuerde agregar clases del ejemplo HTML anterior, porque agregaremos algunos CSS y JS los usa para identificar elementos específicos. Si cambia Tanto como estas clases, deberá actualizar CSS y JS en consecuencia.
Nuestro arrepentimiento usa la cuadrícula CSS para ahorrar todas las celdas sin demasiado trabajo:

Paso 3: Haga dinámica Hay más cosas para configurar para ser dinámicas. Primero, haga la publicación de WordPress de tipo de interrogatorio del repetidor. Luego establezca la fecha y el título de publicación para que sea dinámico.
Ahora configuraremos las tres imágenes. Aquí las cosas pueden ser complicadas. Establezca la URL de la imagen 1 para que sea la URL de la imagen presentada. Establezca la URL de la imagen 2 para que sea la imagen de tipo flotante, establecida en ACF. Para este tutorial, los campos ACF no se mostraron en la ventana emergente de “datos dinámicos” (probablemente debido a un oxígeno Builder 4.0 Beta 2). Hay una solución fácil si alguna vez experimenta esto:

1 – Ingrese los datos dinámicos 2 – Seleccione el valor de retorno de la función PHP

3 – Inserte a mano el contenido del campo ACF con get_field (‘fieldName’)


Finalmente, debemos establecer la imagen de distorsión que el efecto usará para hacer la transición. Se inserta en HTML como un atributo de datos, que JS lee e incorpora en efecto. Desde el HTML anterior, podemos ver que hay varios atributos, que se pueden editar para cambiar el efecto. ! Es “Wrapper de imagen Div” -> …
Lo principal que debe hacer dinámicamente es mover los datos, que tendrá la URL de la imagen establecida en la publicación usando ACF. Apenas codificamos los otros tres atributos, pero puede usar el mismo método presentado a continuación para hacer estos usuarios editables.
Acceda al elemento de embalaje de imagen (el DIT alrededor de las dos imágenes dinámicas). Haga clic en Avanzado -> Atributos y agregue los siguientes.

Para la descripción de datos, lo haremos dinámicamente haciendo clic en el botón Data+ en el contenido e insertando el campo ACF apropiado. La interfaz HTML se verá así, y JS usará todos estos datos (que son dinámicos y pueden ser editados por el usuario por ACF) para crear el efecto de desplazamiento genial en WordPress: Paso 4: Agregar CSS, Bibliotecas y JS agregaremos El siguiente CSS a nuestra hoja de estilo CSS universal. Es posible que deba jugar con estilos CSS adicionales para que todo funcione bien.

.Grid__Item {desbordamiento: oculto; Posición: relativo; } .Grid__Item-Account {Z-índice: 5; } .Grid__item-img {display: block; Altura: 100%; Ancho: 100%; } .Grid__Item-IMg Canvas {altura: 100%; Posición: Absoluto; Arriba: 0; IND ÍNDICE: 1; } .Grid__item-img img {altura: 100%; Bloqueo de pantalla; } / * Esta es una reserva si el js no funciona * / .grid__item-wem: nth-child (2) {posición: absoluto; Arriba: 0; Izquierda: 0; Opacidad: 0; Transición: Opacidad 0.3S; } .Grid__item: hover .grid__item-img img: nth-child (2) {opacidad: 1; } .js .grid__item-wemm {display: none; } Finalmente, cargaremos las bibliotecas JS necesarias y el código (lo hicimos con un bloque de código):
Usamos Static para nuestro ejemplo (extrayendo las bibliotecas de efectos cargadas de imágenes y flotantes en GitHub), pero idealmente debe alojar esto en su sitio, utilizando un instrumento como el organizador de scripts o scripts avanzados.

También cargamos tres.js y tweenmax.js, que son las dos bibliotecas básicas que funcionan para generar el efecto de movimiento.Finalmente, JS hace lo siguiente: identifica cuándo se cargan las imágenes y aplica el efecto de desplazamiento a cualquier elemento.Completamente dinámico y funcionará independientemente del número de publicaciones devueltas por el Repetitor Oxygen Builder.Después de haber agregado todo esto, ¡su efecto debería funcionar!Esto fue solicitado por un miembro de nuestro grupo isotrópico de Facebook.Te invitamos a unirte aquí. Abon y distribuir

Si le gustó este contenido, suscríbase al resumen mensual de noticias de WordPress, inspiración para sitios web, ofertas exclusivas y artículos interesantes.
Dar la baja en cualquier momento.No enviamos spam y nunca venderemos o distribuiremos su correo electrónico.