JavaScriptでフォームのラベルにエフェクトをつける

こんにちは。KOUKIです。

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

実装するもの

今回は、フォームのラベルにエフェクト(ウェーブ)をつける方法を学習しました。

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

環境構築

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

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

開発

ページの作成

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

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

スタイルの追加

次にスタイルを記述しましょう。

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

JavaScriptの実装

やることは単純です。ラベル(label)要素を取得して、ラベルの文字列(Email/Password)を1文字ずつspanタグに格納後、画面に表示させるだけです。

エフェクトの効果はCSSが半分担いますが、この記事はJavaScriptの記事であるため、詳細は割愛します^^;

要素を取得する

JavaScriptで制御すべき要素が1つあります。最初にその要素を取得しましょう。

spanタグの作成・表示

前述の通り、ラベルにエフェクトをつけるためにspanタグを作成し、画面に表示します。

以下のような感じです。

ブラウザを開くと以下のようにspanタグが追加されていることがわかります。

innerHTML」プロパティは、要素内の HTML のマークアップを取得したり設定したりできます。この機能を利用して、labelタグ内にspanタグを追加しました。

また、先ほどのコードは以下のようにスッキリ書くことが可能です。

ラベルにエフェクト(ウェーブ)をつける

demoでみたラベルのエフェクト(ウェーブ)は、CSSで設定した「cubic-bezier」が関係しています。これはイージング関数の一つで、「アニメーションの始めと終わりを緩やかにする」効果を持っています。

現状はフォームをクリックしてもラベルは単一の動きしかしませんが、アニメーションの実行タイミングをずらしてあげるとウェーブを表現できます

spanタグのstyleに「transition-delay」を追加しました。これは、値が変更されたときにプロパティのトランジション効果(アニメーション)が始まるまでの待ち時間を指定します。

これでOKです。

おわりに

開発経験は4~5年ほどありますが、cubic-bezierは初めて知りました^^

50 Projects In 50 Days – HTML, CSS & JavaScript」はかなり勉強になりますね。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す