Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS
Webdesign

Cómo crear un efecto de escala de grises a color durante el desplazamiento (con CSS y JavaScript)

by
Difficulty:IntermediateLength:ShortLanguages:

Spanish (Español) translation by Carlos (you can also view the original English article)

En este nuevo tutorial, empezaremos con algunas imágenes en escala de grises y aprenderemos a revelar suavemente sus variantes de color al desplazarnos. Para lograr el efecto deseado, vamos a aprovechar las diferentes características modernas de front-end como CSS Grid (rejillas o cuadrículas CSS), la propiedad clip-path y la API Intersection Observer.

Nuestro efecto de escala de grises a color

Sin más preámbulos, revisemos lo que vamos a crear:

Compatibilidad con navegadores

Aunque este efecto tiene una compatibilidad decente con los navegadores, por favor ten en cuenta que no funcionará en algunos navegadores como las versiones anteriores de Microsoft Edge. Para este ejemplo, me concentraré en la técnica detrás del efecto sin ofrecer soluciones alternativas para otros navegadores.

1. Inicia con el marcado HTML

Empezaremos con cuatro secciones:

Dentro de cada sección, colocaremos un encabezado y un contenedor div a pantalla completa. El contenedor incluirá dos divs vacíos. Ambos elementos compartirán la misma imagen de fondo. El primero mostrará la versión en escala de grises, mientras que el segundo la versión original a color:

La imagen a color aparecerá con una animación de deslizamiento de izquierda a derecha. Afortunadamente, podemos personalizar la dirección de esta animación a mediante el atributo data-animation. Todo lo que se necesita es añadir este atributo al elemento .colored correspondiente con valores to-left, to-top o to-bottom.

2. Define los estilos

Con el marcado preparado, continuaremos con los estilos principales.

Clases de utilidad

Para esta demostración, primero definiremos dos clases de utilidad que adjuntaremos a los elementos objetivo:

Apilando los elementos

De forma predeterminada, los divs que contienen las imágenes se apilarán unos sobre otros. Únicamente el div con la imagen en escala de grises será visible.

Para apilar esos elementos, aprovecharemos una técnica de CSS Grid que he tratado en tutoriales anteriores.

Aquí están los estilos que se requieren:

Imágenes en escala de grises

Para crear las imágenes en escala de grises, utilizaremos la función grayscale() de CSS y le pasaremos el valor de 1 o 100% como su argumento. Asimismo, le daremos a todas las imágenes en escala de grises un color de fondo como una alternativa hasta que se carguen cada una de esas imágenes:

Imágenes a color

Como se mencionó antes, las imágenes a color estarán ocultas al principio. Se harán visibles con una animación de deslizamiento tan pronto como una parte de ellas se haga visible en la página.

Revisa aquí una versión GIF del efecto final.

Para ocultarlos de manera visual, no usaremos ninguna de las formas tradicionales de CSS como display: none, opacity: 0 y transform: translateX (-100%). De hecho, vamos a probar clip-path, una propiedad moderna de CSS que puede ayudarnos a crear efectos interesantes.

Una explicación rápida de la propiedad clip-path

La propiedad clip-path nos brinda la capacidad de cortar partes de un elemento y mostrar únicamente una porción específica de él. El área visible puede ser representada con diferentes formas (círculos, elipses, polígonos, rectángulos).

En nuestro ejemplo, utilizaremos la función inset() para crear el rectángulo deseado.

En su forma más simple, puede recibir hasta cuatro valores en dirección de las agujas del reloj que especifican los desplazamientos laterales (arriba, derecha, abajo, izquierda) que generan el área seleccionada. Para simplificar, podemos utilizar la abreviatura margin (margen) que nos brinda la capacidad de establecer los cuatro recuadros con uno, dos, tres o cuatro valores. De manera opcional, podemos pasar algunos valores extra a esta función para especificar la redondez del rectángulo.

Así que, solo para practicar, supongamos que tenemos la siguiente imagen de Pixabay que es de 200px por 300px.

Initial image

Si le damos clip-path: inset(10px 20px 30px 40px), la imagen resultante será de 140px por 260px:

Image after clip-path

Yendo un paso más allá, un elemento con clip-path: inset(0) significa que el elemento completo aparecerá.

Por otra parte, un elemento con uno de los cuatro valores ajustado al 100% significa que será comprimido y escondido. Ten en cuenta que el orden de este valor dentro de la función importa y puede producir diferentes animaciones.

De regreso a nuestro ejemplo, aquí está cómo ocultamos las imágenes de color al principio:

3. Animar durante el desplazamiento

Las imágenes a color se animarán y se alternarán durante el desplazamiento.

Para llevar a cabo esta tarea, aprovecharemos la API Intersection Observer.

Cuando al menos el 50% de cada elemento objetivo entre en la ventana gráfica, recibirá la clase is-animated. En caso contrario, perderá esta clase y se ocultará.

Sin entrar en muchos detalles, aquí está el código JavaScript que implementa esta funcionalidad:

Nota 1: Para ver cómo funciona esta API y lo qué devuelve a medida que te desplazas, imprime entry en la consola del navegador.

Nota 2: Al principio, en lugar de la propiedad intersectionRatio probé isIntersecting. Sin embargo, noté que presenta errores en Firefox.

Sugerencia: Si prefieres que la animación se ejecute solamente una vez, debes llamar al método unobserve (), de esta forma:

Y la clase CSS asociada:

Conclusión

¡Eso es todo, amigos! Hoy, hemos logrado crear un interesante efecto de desplazamiento aprovechando las nuevas y fascinantes funciones de CSS y JavaScript.

Obviamente, como cualquier herramienta moderna, este efecto tiene algunas limitaciones en cuanto a la compatibilidad con los navegadores, especialmente si estás considerando navegadores más antiguos. Por ejemplo, como solución alternativa, puedes mostrar las imágenes a color por defecto en caso de que el navegador no admita la propiedad clip-path.

Esperemos que este ejercicio te haya ayudado a aprender algo nuevo y que te haya brindado algunas ideas creativas. Aquí hay un recordatorio de lo que creamos:

Como siempre, ¡muchas gracias por leer!

El siguiente nivel en el aprendizaje de front-end

Cuando estás aprendiendo algo relacionado con front-end, ¡la clave es la práctica! Los siguientes tutoriales te enseñarán una variedad de técnicas para añadir a tu conjunto de habilidades de CSS y JavaScript:


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.