Ce cours n’est plus maintenu. Découvrez nos derniers cours et labs. N’hésitez pas à nous faire part de vos retours sur Discord .

projet dans CSS Skill Tree

Profondeur de champ dans les images

Dans ce projet, vous apprendrez à 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 premier plan d'une image est flou tandis que l'arrière-plan reste net.

ProjetDéveloppement web

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Programme

★★ Challenge Mode: for Advanced Users
★ Guided Mode: for Beginners

Introduction

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

exemple d'effet de profondeur de champ

🎯 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

Enseignant

labby
Labby
Labby is the LabEx teacher.

Recommandé pour vous

no data