Depth of Field in Images: Dynamic Blur Effect with JavaScript

Introduction

In this project, you will learn how to dynamically apply a depth of field effect to images using JavaScript. The depth of field effect is a popular visual technique in photography and web design, where the foreground of an image is blurred while the background remains clear.

👀 Preview

🎯 Tasks

In this project, you will learn:

How to dynamically select and manipulate images using JavaScript
How to apply a blur effect to specific images to create a depth of field
How to use JavaScript to modify the CSS properties of HTML elements

🏆 Achievements

After completing this project, you will be able to:

Apply a depth of field effect to images using JavaScript
Understand the importance of the DOM (Document Object Model) and how to interact with it using JavaScript
Explain the concept of depth of field and how it can be used to enhance the visual appeal of web pages

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("`DOM Traversal`") subgraph Lab Skills javascript/dom_select -.-> lab-300048{{"`Depth of Field in Images`"}} javascript/dom_manip -.-> lab-300048{{"`Depth of Field in Images`"}} javascript/dom_traverse -.-> lab-300048{{"`Depth of Field in Images`"}} end

Set Up the Project Structure

Have you ever seen an effect like the one below when browsing web pages?

We can see that the foreground of the image is blurry while the background is clear. We call this effect "Depth of Field".

Before starting to accomplish the above effects, open the experiment environment, and the directory structure is as follows:

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

images is the folder for images.
index.html is the main page.
style.css is the style file.

Click on Go Live button in the bottom right corner of WebIDE, to run the project.

Next, open "Web 8080" on the top of the VM and refresh it manually and you will see the page.

Then, you will see the following effect (by default, all images are blurry):

Add Depth of Field Effect to Images

In this step, you will learn how to dynamically add depth of field effect to the images using JavaScript.

Open the index.html file in your code editor.
Locate the <script> section at the bottom of the HTML file.
Inside the <script> section, add the following code to apply the depth of field effect to the images:

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

This code removes the blur effect from the images of the people and the maple forest to make them clear.

Save the index.html file and refresh the page. You should now see the depth of field effect applied to the images, with the person and maple leaf forest being clear while the other images are blurred.

✨ Check Solution and Practice

Summary

Congratulations! You have completed this project. You can practice more labs in LabEx to improve your skills.

Depth of Field in Images