kokeblog

jQueryでよくあるフェードインを作る

  • 2020年06月28日
  • 今回は、jQueryとCSSアニメーションを組み合わせて、Webサイトでよく使われているようなスクロールしていくと要素がフェードインするのを作っていこうと思います。

    スクロールしたら表示されるようにする

    まずは、スクロールしたらシンプルにふわっと表示されるようにします。これは別にスクロールの位置を取得せずにそのままスクロールしたときに表示しているだけなので結構簡単にできますね

    シンプルにwindow(画面上)がスクロールしたときにopacityに1を指定したanimeクラスをdivに付与しているだけですね。

    対象の要素までスクロールしたときに表示されるようにする

    次は対象の要素までスクロールしたら先ほどのように表示されるようにします。

    これは先ほどとイベントは同じですが、if文で今のスクロール位置よりも対象の要素のスクロール位置の方が大きくなったときに元々divに付いているhideクラスを取り除いて表示させています。

    対象の要素までスクロールしたときに横からしてくるようにする

    最後にタイトルにあるように要素が横からフェードインしてくるようにします。

    対象の要素をtrasformであらかじめ左側に持ってきておいてopacity: 0;で要素自体を非表示にしておきます。そこから対象の要素までいくと移動した分を戻して、要素を表示させるクラスを付与するようになっています。

    まとめ

    今回は、Webサイトによくある、横から要素がフェードインしてくるような物を作りました。もちろん、横だけでなく縦方向にも数値を少しいじればできるので自分のサイトなどにも取り入れて見たら面白いかと思います。割と、サイトで使われているようなアニメーションは、簡単に実装できるので色々と試してみようと思います。

    Pocket

    関連記事

    jQueryのanimate関数について

    jQueryのeachメソッドの使い方

    jQueryの基礎

    CSSアニメーションの基礎

    カテゴリー