はじめに
このプロジェクトでは、JavaScript を使って画像に動的に焦点深度効果を適用する方法を学びます。焦点深度効果は、写真やウェブデザインにおいて人気のある視覚的な手法であり、画像の前景がぼかされる一方で背景は鮮明なままになります。
👀 プレビュー
🎯 タスク
このプロジェクトでは、以下を学びます。
- JavaScript を使って画像を動的に選択し操作する方法
- 特定の画像にぼかし効果を適用して焦点深度を作成する方法
- JavaScript を使って HTML 要素の CSS プロパティを変更する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- JavaScript を使って画像に焦点深度効果を適用する
- DOM（文書オブジェクトモデル）の重要性を理解し、JavaScript を使ってそれとやり取りする方法を理解する
- 焦点深度の概念を説明し、それがウェブページの視覚的魅力を高めるためにどのように使えるかを説明する
プロジェクト構造を設定する
ウェブページを閲覧しているとき、以下のような効果を見たことはありますか？
画像の前景がぼやけている一方、背景は鮮明であることがわかります。この効果を「焦点深度」と呼びます。
上記の効果を実現する前に、実験環境を開き、ディレクトリ構造は以下の通りです。
├── images
├── index.html
└── style.css
imagesは画像用のフォルダです。index.htmlはメインページです。style.cssはスタイルファイルです。
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。
すると、以下のような効果が見られます（デフォルトではすべての画像がぼやけています）。
画像に焦点深度効果を追加する
このステップでは、JavaScript を使って画像に動的に焦点深度効果を追加する方法を学びます。
- コードエディタで
index.htmlファイルを開きます。 - HTML ファイルの下部にある
<script>セクションを見つけます。 <script>セクションの中に、画像に焦点深度効果を適用するために以下のコードを追加します。
document.querySelector(".img1").style.filter = "blur(0px)";
document.querySelector(".img2").style.filter = "blur(0px)";
このコードは、人物と楓の森の画像のぼかし効果を取り除き、画像を鮮明にします。
index.htmlファイルを保存してページを更新します。すると、画像に焦点深度効果が適用され、人物と楓の葉の森が鮮明で、他の画像がぼやけた状態が見られるはずです。
まとめ
おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために、LabEx でさらに多くの実験を行うことができます。
