jQuery_fadeIn_animation

jQuery scroll event animation and documentReady animation

参考にしたブログ

https://moshashugyo.com/media/animate-on-scroll
こちらのコードを参考にしながら作りました。ありがとうございます。

jQueryでよく使う動きをまとめたコードです。

以下の２種類を作りました。
1.ウィンドウを読み込んだらフェードインするアニメ
2.スクロールイベントでフェードインするアニメ

使い方

動かしたい要素に「js-scroll-trigger」のCSSクラスをつけてください。
さらに、CSSのクラスを動かしたい方法に合わせて２つ付けます。
「動かし方」と「現れ方」について2種のクラスがあります。
それぞれから１つのクラスを選んで、組み合わせて使ってください。

現れ方

*ウィンドウを読み込んだ時点でフェードイン
.mv_fade_in

*スクロールして要素が見えたらフェードイン
.fade_in

動かし方

*右から左へ動きながらフェードイン
.u-fade-type-left

*左から右へ動きながらフェードイン
.u-fade-type-right

*下がりながらフェードイン
.u-fade-type-down

*上がりながらフェードイン
.u-fade-type-up

*静止してフェードイン
.u-fade-type-static

それぞれの組み合わせのサンプルが以下になります。 https://wakasato.github.io/jQuery_fadeIn_animation/