画像の焦点深度

はじめに

このプロジェクトでは、JavaScriptを使って画像に動的に焦点深度効果を適用する方法を学びます。焦点深度効果は、写真やウェブデザインにおいて人気のある視覚的な手法であり、画像の前景がぼかされる一方で背景は鮮明なままになります。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• JavaScriptを使って画像を動的に選択し操作する方法
• 特定の画像にぼかし効果を適用して焦点深度を作成する方法
• JavaScriptを使ってHTML要素のCSSプロパティを変更する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• JavaScriptを使って画像に焦点深度効果を適用する
• DOM（文書オブジェクトモデル）の重要性を理解し、JavaScriptを使ってそれとやり取りする方法を理解する
• 焦点深度の概念を説明し、それがウェブページの視覚的魅力を高めるためにどのように使えるかを説明する

Skills Graph

プロジェクト構造を設定する

ウェブページを閲覧しているとき、以下のような効果を見たことはありますか？

画像の前景がぼやけている一方、背景は鮮明であることがわかります。この効果を「焦点深度」と呼びます。

上記の効果を実現する前に、実験環境を開き、ディレクトリ構造は以下の通りです。

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

• imagesは画像用のフォルダです。
• index.htmlはメインページです。
• style.cssはスタイルファイルです。

WebIDEの右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VMの上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

すると、以下のような効果が見られます（デフォルトではすべての画像がぼやけています）。

画像に焦点深度効果を追加する

このステップでは、JavaScriptを使って画像に動的に焦点深度効果を追加する方法を学びます。

1. コードエディタでindex.htmlファイルを開きます。
2. HTMLファイルの下部にある<script>セクションを見つけます。
3. <script>セクションの中に、画像に焦点深度効果を適用するために以下のコードを追加します。

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

このコードは、人物と楓の森の画像のぼかし効果を取り除き、画像を鮮明にします。

4. index.htmlファイルを保存してページを更新します。すると、画像に焦点深度効果が適用され、人物と楓の葉の森が鮮明で、他の画像がぼやけた状態が見られるはずです。

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabExでさらに多くの実験を行うことができます。