Profondeur de champ dans les images

Introduction

Dans ce projet, vous allez apprendre à appliquer dynamiquement un effet de profondeur de champ aux images à l'aide de JavaScript. L'effet de profondeur de champ est une technique visuelle populaire en photographie et en conception web, où le plan d'avant d'une image est flou tandis que l'arrière-plan reste net.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment sélectionner et manipuler dynamiquement des images à l'aide de JavaScript
• Comment appliquer un effet de flou à des images spécifiques pour créer une profondeur de champ
• Comment utiliser JavaScript pour modifier les propriétés CSS d'éléments HTML

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

• Appliquer un effet de profondeur de champ aux images à l'aide de JavaScript
• Comprendre l'importance du DOM (Document Object Model) et comment interagir avec lui à l'aide de JavaScript
• Expliquer le concept de profondeur de champ et comment il peut être utilisé pour améliorer l'attrait visuel des pages web

Configurer la structure du projet

Avez-vous déjà vu un effet comme celui ci-dessous lors de la navigation sur des pages web?

On peut voir que le plan d'avant de l'image est flou tandis que l'arrière-plan est net. On appelle cet effet "Profondeur de champ".

Avant de commencer à réaliser les effets ci-dessus, ouvrez l'environnement d'expérience et la structure de répertoire est la suivante :

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

• images est le dossier pour les images.
• index.html est la page principale.
• style.css est le fichier de style.

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la VM et rafraîchissez manuellement la page et vous verrez la page.

Ensuite, vous verrez l'effet suivant (par défaut, toutes les images sont floues) :

Ajouter l'effet de profondeur de champ aux images

Dans cette étape, vous allez apprendre à ajouter dynamiquement l'effet de profondeur de champ aux images à l'aide de JavaScript.

1. Ouvrez le fichier index.html dans votre éditeur de code.
2. Localisez la section <script> en bas du fichier HTML.
3. Dans la section <script>, ajoutez le code suivant pour appliquer l'effet de profondeur de champ aux images :

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

Ce code supprime l'effet de flou des images des personnes et de la forêt de maple pour les rendre nettes.

4. Enregistrez le fichier index.html et rafraîchissez la page. Vous devriez maintenant voir l'effet de profondeur de champ appliqué aux images, avec la personne et la forêt de feuilles de maple étant nettes tandis que les autres images sont floues.

Résumé

Félicitations! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.