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

JavaScriptJavaScriptBeginner
Практиковаться сейчас

💡 Этот учебник переведен с английского с помощью ИИ. Чтобы просмотреть оригинал, вы можете перейти на английский оригинал

Введение

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

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

пример эффекта глубины резкости

🎯 Задачи

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

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

🏆 Достижения

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

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

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{{"Глубина резкости в изображениях"}} javascript/dom_manip -.-> lab-300048{{"Глубина резкости в изображениях"}} javascript/dom_traverse -.-> lab-300048{{"Глубина резкости в изображениях"}} end

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

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

Завершенный эффект

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

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

├── 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)";

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

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

Резюме

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