Tiefenschärfe in Bildern: Dynamischer Verblur-Effekt mit JavaScript

Einführung

In diesem Projekt lernst du, wie du mit JavaScript dynamisch einen Tiefenschärfeeffekt auf Bilder anwenden kannst. Der Tiefenschärfeeffekt ist eine beliebte visuelle Technik in der Fotografie und im Webdesign, bei der der Vordergrund eines Bildes verbluert wird, während der Hintergrund klar bleibt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du mit JavaScript Bilder dynamisch auswählen und manipulieren kannst
Wie du einem bestimmten Bild einen Verblur-Effekt applizierst, um einen Tiefenschärfeeffekt zu erzeugen
Wie du mit JavaScript die CSS-Eigenschaften von HTML-Elementen ändern kannst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Einen Tiefenschärfeeffekt auf Bilder mit JavaScript anzuwenden
Die Wichtigkeit des DOM (Document Object Model) zu verstehen und wie man mit ihm mit JavaScript interagieren kann
Den Begriff des Tiefenschärfeeffekts zu erklären und wie er genutzt werden kann, um die visuelle Attraktivität von Webseiten zu verbessern

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{{"Tiefenschärfe in Bildern"}} javascript/dom_manip -.-> lab-300048{{"Tiefenschärfe in Bildern"}} javascript/dom_traverse -.-> lab-300048{{"Tiefenschärfe in Bildern"}} end

Aufbau der Projektstruktur

Hast du jemals einen Effekt wie den unten dargestellten gesehen, wenn du Webseiten durchsuchst?

Wir können sehen, dass der Vordergrund des Bildes verwaschen ist, während der Hintergrund klar ist. Wir nennen diesen Effekt "Tiefenschärfe".

Bevor du开始, um die obigen Effekte zu erzielen, öffne die Experimentumgebung, und die Verzeichnisstruktur ist wie folgt:

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

images ist der Ordner für Bilder.
index.html ist die Hauptseite.
style.css ist die Styledatei.

Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.

Als Nächstes öffne "Web 8080" oben auf der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Dann wirst du den folgenden Effekt sehen (standardmäßig sind alle Bilder verwaschen):

Füge Tiefenschärfeeffekt zu Bildern hinzu

In diesem Schritt lernst du, wie du mit JavaScript dynamisch einen Tiefenschärfeeffekt zu den Bildern hinzufügst.

Öffne die Datei index.html in deinem Code-Editor.
Locate den <script>-Abschnitt am Ende der HTML-Datei.
Füge innerhalb des <script>-Abschnitts folgenden Code hinzu, um den Tiefenschärfeeffekt auf die Bilder anzuwenden:

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

Dieser Code entfernt den Verblur-Effekt von den Bildern der Personen und des Ahornwaldes, um sie klar zu machen.

Speichere die Datei index.html und aktualisiere die Seite. Du solltest jetzt den Tiefenschärfeeffekt auf den Bildern sehen, wobei die Person und der Ahornblattwald klar sind, während die anderen Bilder verwaschen sind.

✨ Lösung prüfen und üben

Zusammenfassung

Herzlichen Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Labore absolvieren, um deine Fähigkeiten zu verbessern.