Clavando esa transición de disolución genial

Vamos a crear un efecto de transición impresionante entre imágenes que, me atrevo a decir, es muy sencillo de implementar y aplicar a cualquier sitio. Usaremos la biblioteca kampos porque es muy buena para hacer exactamente lo que necesitamos. También exploraremos algunas formas posibles de modificar el resultado para que pueda hacerlo único según sus necesidades y ajustarlo a la experiencia y la impresión que está creando.

Eche un vistazo a la colección Awwwards Transitions y tendrá una idea de lo popular que es crear efectos inmersivos, como convertir un elemento multimedia en otro. Muchos de esos ejemplos utilizan WebGL para el trabajo. Otra cosa que tienen en común es el uso de mapeo de texturas para un efecto de desplazamiento o disolución (o ambos).

Para crear estos efectos, necesita las dos fuentes de medios desde y hacia las que desea realizar la transición, más una más que es el mapa , o una cuadrícula de valores para cada píxel, que determina cuándo y cuántos medios cambian de una imagen a la otra. del mes próximo. Ese mapa puede ser una imagen ya preparada o canvasdibujada, por ejemplo, sobre ruido. Usar un efecto de transición de disolución aplicando un ruido como mapa es definitivamente una de esas cosas que pueden mejorar esa experiencia web inmersiva. Eso es lo que buscamos.

Preparando la escena

Antes de que podamos pasar a la maquinaria pesada, necesitamos una escena DOM simple. Dos imágenes (o vídeos, si lo prefieres) y la cantidad mínima de JavaScript para asegurarte de que estén cargados y listos para su manipulación.

main  section    figure      canvas        img src="path/to/first.jpg" alt="My first image" /        img data-src="path/to/second.jpg" alt="My second image" /      /canvas    figure  /section/main

Esto nos dará un DOM mínimo para trabajar y mostrar nuestra escena. El escenario está listo; ahora invitamos a nuestros actores principales, las dos imágenes:

// Notify when our images are readyfunction loadImage (src) {  return new Promise(resolve = {    const img = new Image();    img.onload = function () {      resolve(this);    };    img.src = src;  });}// Get the image URLsconst imageFromSrc = document.querySelector('#source-from').src;const imageToSrc = document.querySelector('#source-to').dataset.src;// Load images  and keep their promises so we know when to startconst promisedImages = [  loadImage(imageFromSrc),  loadImage(imageToSrc)];

Creando el mapa de disolución

La escena está preparada, las imágenes recuperadas: ¡hagamos algo de magia! Empezaremos creando los efectos que necesitamos. Primero, creamos el mapa de disolución creando algo de ruido. Usaremos un ruido Perlin clásico dentro de un efecto de turbulencia que acumula ruido en diferentes escalas, uno encima del otro, y lo representa en una canvasescala de grises:

const turbulence = kampos.effects.turbulence({ noise: kampos.noise.perlinNoise });

Este efecto funciona como el efecto de filtro SVG feTurbulence. Hay algunos buenos ejemplos de esto en “Creación de patrones con filtros SVG” de Bence Szabó.

En segundo lugar, establecemos los parámetros iniciales del efecto de turbulencia. Estos se pueden modificar más adelante para obtener los elementos visuales específicos que podamos necesitar en cada caso:

// Depending of course on the size of the target canvasconst WIDTH = 854;const HEIGHT = 480;const CELL_FACTOR = 2;const AMPLITUDE = CELL_FACTOR / WIDTH;turbulence.frequency = {x: AMPLITUDE, y: AMPLITUDE};turbulence.octaves = 1;turbulence.isFractal = true;

Este código nos proporciona una agradable textura de ruido similar a un líquido o una burbuja. La transición resultante parece como si la primera imagen se hundiera en la segunda imagen. El CELL_FACTORvalor se puede aumentar para crear una textura más densa con manchas más pequeñas, mientras que octaves=1es lo que mantiene el ruido. Observe que también normalizamos la amplitud al menos al lado más grande del medio, de modo que la textura se estire bien a lo largo de nuestra imagen.

A continuación renderizamos el mapa de disolución. Para poder ver lo que tenemos, usaremos el lienzo que ya está en el DOM, sólo por ahora:

const mapTarget = document.querySelector('#target'); // instead of document.createElement('canvas');mapTarget.width = WIDTH;mapTarget.height = HEIGHT;const dissolveMap = new kampos.Kampos({  target: mapTarget,  effects: [turbulence],  noSource: true});dissolveMap.draw();

Descanso

Haremos una pausa aquí y examinaremos cómo el cambio de los parámetros anteriores afecta los resultados visuales. Ahora, modificamos algunas de las configuraciones de ruido para obtener algo que se parezca más al humo que al líquido, por ejemplo:

const CELL_FACTOR = 4; // instead of 2

Y también esto:

turbulence.octaves = 8; // instead of 1

Ahora tenemos un patrón más denso con ocho niveles (en lugar de uno) superpuestos, dando mucho más detalle:

¡Fantástico! Ahora volvamos a los valores originales ya nuestra característica principal…

Creando la transición

Es hora de crear el efecto de transición:

const dissolve = kampos.transitions.dissolve();dissolve.map = mapTarget;dissolve.high = 0.03; // for liquid-like effect

Observe el valor anterior para high? Esto es importante para obtener resultados similares a los líquidos. La transición utiliza una función de paso para determinar si se muestra el primer o el segundo medio. Durante ese paso, la transición se realiza suavemente para que obtengamos bordes suaves en lugar de irregulares. Sin embargo, mantenemos el borde inferior del escalón en 0.0(valor predeterminado). Puedes imaginar que una transición de 0.0a 0.03es muy abrupta, lo que resulta en un cambio rápido de un medio al siguiente. Piense en ello como un recorte.

Por otro lado, si el rango fuera 0.0, 0.5obtendríamos un rango más amplio de “transparencia” o una mezcla de las dos imágenes (como obtendríamos con opacidad parcial) y obtendríamos una apariencia de humo o “efecto turbio”. Lo intentaremos en un momento.

Antes de continuar, debemos recordar reemplazar el lienzo que obtuvimos del documento con uno nuevo que creamos fuera del DOM, así:

const mapTarget = document.createElement('canvas');

Conéctalo y… ¡acción!

¡Casi estamos allí! Creemos nuestra instancia de compositor:

const target = document.querySelector('#target');const hippo = new kampos.Kampos({target, effects: [dissolve]});

Y finalmente, obtenga las imágenes y reproduzca la transición:

Promise.all(promisedImages).then(([fromImage, toImage]) = {  hippo.setSource({media: fromImage, width, height});  dissolve.to = toImage;  hippo.play(time = {    // a sin() to play in a loop    dissolve.progress = Math.abs(Math.sin(time * 4e-4)); // multiply time by a factor to slow it down a bit  });});

¡Dulce!

Efectos especiales

Bien, tenemos esa bondad amorfa. Podemos intentar jugar un poco con los parámetros para obtener un resultado completamente diferente. Por ejemplo, tal vez algo más parecido al humo:

const CELL_FACTOR = 4;turbulence.octaves = 8;

Y para una transición más suave, elevaremos el borde superior de la función de paso de la transición:

dissolve.high = 0.3;

Ahora tenemos esto:

Efectos especiales adicionales

Y, para nuestro último giro argumental, ¡animemos también el ruido mismo! Primero, debemos asegurarnos de que Kampos actualice la textura del mapa de disolución en cada cuadro, algo que no hace de forma predeterminada:

dissolve.textures[1].update = true;

Luego, en cada cuadro, queremos avanzar la timepropiedad de turbulencia y volver a dibujarla. También ralentizaremos la transición para que podamos ver cómo cambia el ruido mientras se lleva a cabo la transición:

hippo.play(time = {  turbulence.time = time * 2;  dissolveMap.draw();  // Notice that the time factor is smaller here  dissolve.progress = Math.abs(Math.sin(time * 2e-4));});

Y obtenemos esto:

¡Eso es todo!

Salir… etapa derecha

Este es sólo un ejemplo de lo que podemos hacer con kampos para las transiciones de medios. Ahora depende de usted mezclar los ingredientes para sacarle el máximo provecho. A continuación se ofrecen algunas ideas que le ayudarán a empezar:

• Transición entre fondos de sitio/sección
• Transición entre fondos en un carrusel de imágenes
• Cambiar el fondo en reacción a un clic o al pasar el cursor
• Eliminar una imagen de póster personalizada de un vídeo cuando comience a reproducirse

Hagas lo que hagas, asegúrate de avisarnos en los comentarios.