Profundidade de Campo em Imagens

Introdução

Neste projeto, você aprenderá como aplicar dinamicamente um efeito de profundidade de campo (depth of field) a imagens usando JavaScript. O efeito de profundidade de campo é uma técnica visual popular em fotografia e design web, onde o primeiro plano de uma imagem é desfocado enquanto o fundo permanece nítido.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como selecionar e manipular imagens dinamicamente usando JavaScript
• Como aplicar um efeito de desfoque a imagens específicas para criar uma profundidade de campo
• Como usar JavaScript para modificar as propriedades CSS de elementos HTML

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Aplicar um efeito de profundidade de campo a imagens usando JavaScript
• Compreender a importância do DOM (Document Object Model) e como interagir com ele usando JavaScript
• Explicar o conceito de profundidade de campo e como ele pode ser usado para aprimorar o apelo visual de páginas web

Configurar a Estrutura do Projeto

Você já viu um efeito como o abaixo ao navegar em páginas web?

Podemos ver que o primeiro plano da imagem está desfocado enquanto o fundo está nítido. Chamamos este efeito de "Profundidade de Campo" (Depth of Field).

Antes de começar a realizar os efeitos acima, abra o ambiente de experimento, e a estrutura do diretório é a seguinte:

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

• images é a pasta para imagens.
• index.html é a página principal.
• style.css é o arquivo de estilo.

Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.

Em seguida, abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página.

Então, você verá o seguinte efeito (por padrão, todas as imagens estão borradas):

Adicionar o Efeito de Profundidade de Campo às Imagens

Nesta etapa, você aprenderá como adicionar dinamicamente o efeito de profundidade de campo às imagens usando JavaScript.

1. Abra o arquivo index.html no seu editor de código.
2. Localize a seção <script> na parte inferior do arquivo HTML.
3. Dentro da seção <script>, adicione o seguinte código para aplicar o efeito de profundidade de campo às imagens:

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

Este código remove o efeito de desfoque das imagens das pessoas e da floresta de bordo para torná-las nítidas.

4. Salve o arquivo index.html e atualize a página. Agora você deve ver o efeito de profundidade de campo aplicado às imagens, com a pessoa e a floresta de folhas de bordo nítidas, enquanto as outras imagens estão borradas.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.