Depth of Field in Images

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

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.

1. Open the index.html file in your code editor.
2. Locate the <script> section at the bottom of the HTML file.
3. 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.

4. 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.

Summary

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