Глубина резкости в изображениях

Введение

В этом проекте вы научитесь динамически применять эффект глубины резкости к изображениям с использованием JavaScript. Эффект глубины резкости - это популярный визуальный прием в фотографии и веб-дизайне, при котором передний план изображения размывается, а фон остается четким.

👀 Предварительный просмотр

🎯 Задачи

В этом проекте вы научитесь:

• динамически выбирать и манипулировать изображениями с использованием JavaScript;
• применять эффект размытия к конкретным изображениям, чтобы создать эффект глубины резкости;
• использовать JavaScript для изменения CSS-свойств HTML-элементов.

🏆 Достижения

После завершения этого проекта вы сможете:

• применять эффект глубины резкости к изображениям с использованием JavaScript;
• понять важность DOM (Document Object Model) и как с ним взаимодействовать с использованием JavaScript;
• объяснить концепцию глубины резкости и как ее можно использовать для повышения визуального привлекательности веб-страниц.

Настройка структуры проекта

Вы когда-нибудь видели эффект, подобный следующему, при просмотре веб-страниц?

Мы видим, что передний план изображения размыт, а фон четкий. Мы называем этот эффект "глубиной резкости".

Прежде чем приступить к реализации вышеописанных эффектов, откройте экспериментальную среду, и структура каталогов будет выглядеть следующим образом:

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

• images - папка для изображений.
• index.html - главная страница.
• style.css - файл со стилями.

Нажмите кнопку Go Live в нижнем правом углу WebIDE, чтобы запустить проект.

Далее откройте "Web 8080" в верхней части ВМ и обновите ее вручную, и вы увидите страницу.

Затем вы увидите следующий эффект (по умолчанию все изображения размыты):

Добавление эффекта глубины резкости к изображениям

В этом шаге вы научитесь динамически добавлять эффект глубины резкости к изображениям с использованием JavaScript.

1. Откройте файл index.html в вашем редакторе кода.
2. Найдите раздел <script> внизу HTML-файла.
3. Внутри раздела <script> добавьте следующий код, чтобы применить эффект глубины резкости к изображениям:

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

Этот код удаляет эффект размытия с изображений людей и леса из кленов, чтобы сделать их четкими.

4. Сохраните файл index.html и обновите страницу. Теперь вы должны увидеть эффект глубины резкости, примененный к изображениям, при этом люди и лес кленов будут четкими, а остальные изображения будут размытыми.

Резюме

Поздравляем! Вы завершили этот проект. Вы можете практиковаться в более многих лабораторных работах в LabEx, чтобы улучшить свои навыки.