スクロールに合わせて要素が動くアニメーションを自作してみた

スクロールすると要素がスクロールにあわせて動くスクロールアニメーションは多くのウェブサイトで使用されていて、現在のウェブ制作においては重要な技術の一つになっていると思います。スクロールに合わせて動くアニメーションの作り方は様々で、多くのJavaScriptライブラリーでもプラグインとして制作されていますが、今回はウェブ制作初心者の方でも理解して頂けるように簡易的なJqueryのプラグインとして記述してみました。親要素のボックスのスクロールトップに合わせて、それぞれの要素が縦移動、横移動、回転するように制作しています。

スクロールするとそれに合わせて動くアニメーションを今回は、「cssを直接的な書き換えで実装する方法」と「class属性の付け替えで実装する方法」の二つの方法で制作してみました。

スクロールアニメーションの制作。【cssを直接書き換える】

スクロールに合わせてcssを書き換えるとこでアニメーションさせる方法のデモとコードを先に示して解説していこうと思います。

demo

html

css

javascript

スクロールアニメーションの制作。【cssを直接書き換える】解説

最初はcssフィルに書き込まれているtransformプロパティーやopacityプロパティーの値でそれぞえれの要素が表示されます。

サイト下部に向かってスクロールして、スクロールトップのy座標から親要素のボックスのオフセットトップのy座標の値を引いた値が100以下ならば、ak_parallax関数を実行して、それぞれの要素のcssにデフォルトの値を与えて、アニメーションを実行します。

サイト上部にスクロールしてif文の条件からはずれた場合各プロパティーの値に空の値が代入され、それぞれの要素に元のcssファイルの値が設定し直されます。

スクロールアニメーションの制作。【class属性をつけ換える】

前章は、cssを直接操作することでスクロールアニメーションさせていましたが、今度は、class属性の付け替えでアニメーションさせてみます。

スクロールに合わせてclass属性を付け換えるとこでアニメーションさせる方法のデモとコードを先に示して解説していこうと思います。

demo

html

上記と同じファイルなので割愛します。

css

javascript

スクロールアニメーションの制作。【class属性をつけ換える】解説

最初にウェブサイトが表示される時、それぞれの要素にmoveクラスが指定されていて、cssファイルの中でmoveクラスを含んだ形でのプロパティーの設定に従って表示されています。

前章同様、サイト下部に向かってスクロール動作を行い、スクロールトップのy座標から親要素のボックスのオフセットトップのy座標の値を引いた値が100以下ならば、ak_parallax関数を実行して、moveクラスを削除することで、アニメーションを実行します。

サイト上部にスクロールしてif文の条件からはずれた場合削除したmoveクラスを付け加え直すことで、最初に表示された状態に戻します。

スクロールに合わせて要素が動くアニメーションの作り方 まとめ

今回は、スクロールに合わせて要素の縦移動、横移動、回転、オパシティーなどが変化するjavascriptをjqueryのプラグインとして作成してみましたが、いかがだったでしょうか?。記事を読んで頂いた方のお役に少しでも立てていれば幸いです。それではまた。

おススメ関連記事

コメント

0

コメントして下さい

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です