JavaScriptでモザイク処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、パスワードを打ち込んでいくと背景のモザイクが薄れていくアプリケーションを作成します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

今回、Tailwind CSSを導入しています。BootstrapのようなCSSのフレームワークですね。

PRがかっこいいです

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

背景のモザイクは、CSSのスタイルで定義しています。

blurはCSSの関数で、画像にぼかしを入れることができます。

ここに設定されている数値をパスワードが打ち込まれた時に変化させれば、目的を達成できそうです。

要素を取得する

最初に画面操作に必要な要素を取得します。

inputイベントの登録

inputイベントを登録します。これは、パスワードが打ち込まれた時に発火するイベントです。

モザイク処理

最後にモザイク処理を実装します。前述の通りblurの数値をJavaScriptで制御します。

これで完成です。

おわりに

Tailwind CSSを使ってみて思ったのですが、こういうフレームワークを上手に使えば、CSSの知識も最低限で良さそうですよね。

今時、バックエンドの処理でさえフレームワークを使うのですから。

CSSを勉強しようと思っていましたが、CSSの最低限の知識はありますし、こういうフレームワークを使いこなせるようになりたいと思いました^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す