【CSS】CSSアニメーションを使ったスクロール時にフェードで画像が出現するアレの作り方

これなんていうんですかね。要するにページをスクロールすると、下から画像が出現するページの作り方です。

なにを言っているのかわからないと思いますので、デモを作ってみました。

スポンサーリンク

スクロール時に画像が上にフェードしながら出てくるアレの作り方

HTML

まずはhtml部分です。リストを作って画像を並べます。liタグの要素を動かしたいので、それぞれそれっぽいクラス名を付けておくと良いでしょう。

下から画像が出現するので、ここではfade_upとします。

CSS

CSSで見た目を整えます。動かしたい要素はopacity: 0;で非表示にしておきましょう。

CSSアニメーション部分です。わかりやすいアニメーション名を付けておきます。HTML部分で付けたクラス名と全く同じにならないように注意しましょう。

ここではわかりやすく、アニメーション名をanime_fade_upとしました。

jQuery

クラス名「fade_up」を持つ要素の近くまでスクロールした時に、上記のアニメーション効果のあるクラスを追加する旨の記述をします。

これでスクロール時に要素が下からフェードインするページの完成です。

要素ごとに違う動きをつけたい

下から出てくるだけじゃなく左とか右から出現させたい、とかフェードインで出現させたいというケース。

HTML

複数の動きを用意したい場合は、わかりやすいように動きに見合ったクラス名をliにつけてあげましょう。

CSS

つけたい動きの分だけCSSアニメーションを記述していきます。今回は左右とフェードインを追加しました。

jQuery

追加したCSSアニメーションに応じてjQueryに記述を追加します。

これで上左右とフェードインのアニメーションの追加が完了です。

スポンサーリンク

スクロール時にフェードで画像を動かすアレ:まとめ

夕日

以上がプラグインなしでスクロール時に画像がフェードで出現するアレの作り方でした。LP製作とかで割と良く使うので、コピペで使えるように半分自分用にまとめてみました。

簡単に仕組みを説明すると、liタグの近くまでスクロールをした時に、アニメーション効果のあるクラスをliタグに追加することで実現しています。

タイトルで「画像が」と銘打っていますが、もちろんテキストにも使えます。応用すればもっと複雑なアニメーションを実装することも可能です。

コメント