Profundidad de Campo en Imágenes

Introducción

En este proyecto, aprenderás a aplicar dinámicamente un efecto de campo profundo a imágenes utilizando JavaScript. El efecto de campo profundo es una técnica visual popular en la fotografía y el diseño web, donde el primer plano de una imagen está desfocado mientras que el fondo permanece nítido.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

• Cómo seleccionar y manipular dinámicamente imágenes utilizando JavaScript
• Cómo aplicar un efecto de desfoque a imágenes específicas para crear un campo profundo
• Cómo utilizar JavaScript para modificar las propiedades CSS de los elementos HTML

🏆 Logros

Después de completar este proyecto, serás capaz de:

• Aplicar un efecto de campo profundo a imágenes utilizando JavaScript
• Comprender la importancia del DOM (Modelo de Objeto de Documento) y cómo interactuar con él utilizando JavaScript
• Explicar el concepto de campo profundo y cómo se puede utilizar para mejorar la apariencia visual de las páginas web

Establece la estructura del proyecto

¿Alguna vez has visto un efecto como el siguiente al navegar por páginas web?

Podemos ver que el primer plano de la imagen está borroso mientras que el fondo es nítido. Llamamos a este efecto "Campo Profundo".

Antes de comenzar a realizar los efectos anteriores, abre el entorno de experimentación y la estructura de directorios es la siguiente:

├── images
├── index.html
└── style.css

• images es la carpeta para las imágenes.
• index.html es la página principal.
• style.css es el archivo de estilo.

Haz clic en el botón Go Live en la esquina inferior derecha de WebIDE, para ejecutar el proyecto.

A continuación, abre "Web 8080" en la parte superior de la VM y actualízala manualmente y verás la página.

Luego, verás el siguiente efecto (por defecto, todas las imágenes están borrosas):

Agrega el efecto de profundidad de campo a las imágenes

En este paso, aprenderás a agregar dinámicamente el efecto de campo profundo a las imágenes utilizando JavaScript.

1. Abre el archivo index.html en tu editor de código.
2. Localiza la sección <script> al final del archivo HTML.
3. Dentro de la sección <script>, agrega el siguiente código para aplicar el efecto de campo profundo a las imágenes:

document.querySelector(".img1").style.filter = "blur(0px)";
document.querySelector(".img2").style.filter = "blur(0px)";

Este código quita el efecto de desfoque de las imágenes de las personas y el bosque de arces para que queden nítidas.

4. Guarda el archivo index.html y actualiza la página. Ahora deberías ver el efecto de campo profundo aplicado a las imágenes, con la persona y el bosque de hojas de arce nítidos mientras que las otras imágenes están desfocadas.

Resumen

¡Felicitaciones! Has completado este proyecto. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.