Efecto de desplazamiento único para repetidores de Oxygen Builder

En este tutorial, vamos a crear un efecto de desplazamiento único para el contenido que se muestra en los repetidores Oxygen Builder. Modelado a partir del "Efecto de desplazamiento de distorsión" de Codrops, y utilizando el código fuente de ese recurso, este efecto creará un desvanecimiento distorsionado en una imagen definida por el usuario cuando un visitante se desplaza sobre una celda repetidora.

Este tutorial incorporará algunos conceptos geniales de Oxygen Builder:

• Técnicas avanzadas de repetidores
• Grupos de campo ACF e integración manual con Oxygen Builder
• Cuadrícula CSS básica
• Atributos dinámicos
• Uso de bloque de código y JS intermedio

Yendo un paso más allá, haremos de esta una función 100 % dinámica, lo que significa que se configurará y se olvidará. ¡No es necesario inicializar un efecto específico para cada celda!

Siga adelante (descarga de fuente):

Nota: esta es una prueba de concepto y probablemente requiera optimización para su uso en sitios de producción.

Otras dos cosas:

• Estamos lanzando un curso Oxygen Builder. Puede obtener más información aquí y unirse a la lista de espera.
• Este fue un tutorial solicitado en nuestro increíble grupo de Facebook . ¡Nos encantaría que te unieras!

Demostración de efectos:

Paso 1: Campos ACF

Usaremos ACF para hacer esto 100% dinámico y fácil de editar para el usuario final. Cree un grupo de campos y agregue una imagen flotante y una imagen de desplazamiento. La imagen inicial será la imagen destacada de la publicación. La imagen flotante es a lo que se desvanecerá el efecto cuando el visitante pase el mouse sobre una publicación repetida.

La imagen de desplazamiento es lo que se usará para hacer la animación única de transformación/desvanecimiento entre las dos imágenes. En este ejemplo, estamos usando las siguientes imágenes para el desplazamiento:

En realidad, puede usar cualquier imagen, pero las imágenes en blanco y negro con una gran textura suelen ser las mejores. ¡Es fácil experimentar con este método!

Así es como se ven el grupo de campos y las imágenes asociadas al agregar una nueva publicación:

Paso 2: crea la estructura para el efecto

Básicamente, estamos copiando el código fuente del ejemplo de Codrops, con modificaciones menores.

Simplemente duplicamos la estructura HTML anterior, con elementos Oxygen Builder. No olvide agregar las clases del ejemplo de HTML anterior, ya que vamos a agregar algo de CSS y JS las usa para identificar elementos específicos. Si cambia estas clases, deberá actualizar el CSS y JS en consecuencia.

Nuestro repetidor está utilizando la cuadrícula CSS para espaciar uniformemente todas las celdas sin mucho trabajo:

Paso 3: hacer dinámico

Hay varias cosas que configurar para que sea dinámico. Primero, haga que el repetidor consulte el tipo de publicación de WordPress.

A continuación, configure la fecha y el título de la publicación para que sean dinámicos.

Ahora, configuraremos las tres imágenes. Aquí es donde las cosas pueden complicarse. Configure la URL de la imagen 1 para que sea la URL de la imagen destacada.

Configure la URL de la imagen 2 para que sea la imagen flotante, configurada en el ACF. Para este tutorial, los campos ACF no se mostraban en la ventana emergente "insertar datos dinámicos" (probablemente debido a un error Oxygen Builder 4.0 Beta 2). Hay una solución fácil si alguna vez experimenta esto:

1 - Insertar los datos dinámicos

2 - Seleccione el valor de retorno de la función PHP

3 - inserte manualmente el contenido del campo ACF con get_field('fieldname')

Finalmente, necesitamos configurar la imagen de distorsión que usará el efecto para hacer la transición de transformación. Esto se inserta en el HTML como un atributo de datos, que JS lee e incorpora en el efecto. Del HTML anterior, podemos ver que hay varios atributos, que se pueden editar para cambiar el efecto.

Lo principal que debemos hacer dinámico es el desplazamiento de datos, que tendrá la URL de la imagen configurada en la publicación usando ACF. Codificamos los otros tres atributos, pero puede usar el mismo método que se describe a continuación para hacer que estos también sean editables por el usuario.

Vaya al elemento contenedor de la imagen (el div alrededor de las dos imágenes dinámicas). Haga clic en Avanzado -> Atributos y agregue lo siguiente.

Para data-displacement , haremos esta dinámica haciendo clic en el botón data+ en el contenido e insertando nuestro campo ACF correspondiente.

El HTML de la interfaz se verá así, y el JS usará todos estos datos (que son dinámicos y editables por el usuario a través de ACF) para crear el efecto de desplazamiento de desplazamiento genial en WordPress:

Paso 4: agregue CSS, bibliotecas y JS

Agregaremos el siguiente CSS a nuestra hoja de estilo Universal CSS. Es posible que deba jugar con estilos CSS adicionales para que todo funcione bien.

Finalmente, cargaremos las bibliotecas JS necesarias y el código (lo hicimos con un bloque de código):

Usamos Statically para nuestro ejemplo (obteniendo las bibliotecas ImagesLoaded y Hover Effect de GitHub), pero idealmente deberías alojar esto en tu sitio, usando una herramienta como Scripts Organizer o Advanced Scripts.

También cargamos Three.JS y TweenMax.JS, que son las dos bibliotecas subyacentes que funcionan para generar el efecto de desplazamiento.

Finalmente, el JS hace lo siguiente: identifica cuándo se cargan las imágenes y aplica el efecto de desplazamiento a cualquier elemento que tenga .grid__item-img , extrayendo las imágenes asociadas y las imágenes de desplazamiento de cada publicación. Completamente dinámico y funcionará independientemente de la cantidad de publicaciones devueltas por el repetidor Oxygen Builder.

¡Después de agregar todo esto, su efecto debería estar funcionando!

Esto fue solicitado por un miembro de nuestro grupo isotrópico de Facebook. Te invitamos a unirte aquí.