ファーストビューに使える素敵なバックグラウンドアニメーション

ファーストビューに使える素敵なバックグラウンドアニメーション

スポンサーリンク

スポンサーリンク

webサイトのファーストビューは、ユーザーの興味を引くことが出来るかどうかの最も重要な要素と言っても過言ではありません。

今回の記事では、ファーストビューを素敵に演出することが出来るバックグラウンドアニメーションを紹介します。

デモ画面

HTML

基本となるHTMLは以下です。

4行目と5行目のIDで、後に説明するスクリプトと関連性を持たせます。

5行目の「canvas」タグが、アニメーションを実装させるための記述です。

13行目がスクリプトファイルを読み込むための記述となります。ファイル名を「anime.js」としていますが、任意のファイル名でももちろん大丈夫です。

CSS

CSSは背景画像を表示させるためだけに使います。

画像のポジション等はお好きなように変更してください。

スクリプト

今回のアニメーションで重要なのが以下のスクリプトです。

ファイル内に直接記述してもいいですし、jsファイルとして読み込む形にしても大丈夫です。

デモ画面では、スクリプトの記述が長いのでjsファイル(ファイル名anime.js)として読み込ませています。

アニメーション・エフェクトの変更

スクリプトの以下の行の数値部分を変更することで、アニメーション・エフェクト(光の玉のようなもの)を変更することが可能です。

  • 74行目「0.1」の数値を大きくすることで、エフェクトの透過度が減少(最大1.0)
  • 75行目「0.1」の数値を大きくすることで、エフェクトサイズも大きく(最大数値は不明ですが、100の時点で画面全体を占有するくらいになります)
  • 87行目の「rgba(255,255,255,)」の数値を変更することで、エフェクトカラーを変更(通常のrgba指定で変更が可能です)

まとめ

ファーストビューにアニメーションがあるかどうかで、webサイトに対するユーザーの興味は大きく変わるハズです。

アニメーション・エフェクトは他にもたくさんありますので、今後も紹介していきたいと思います。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク