【FadeThis】スクロールのタイミングでフェードイン・アウトを簡単にできるjQueryプラグイン

こんにちは、ハル@haru_elpisです。

スクロールタイミングでフェーズ・アウトが簡単にできるプラグインの紹介です。

FadeThisとは

FadeThisは、スクロールしたタイミングでスライドさせながらフェードイン・アウトができるjQueryプラグインです。オプションでスライドのスピードを調整したり、フェードイン・アウトするのを繰り返さないように設定することもできます。

ダウンロード

lwiesel/jquery-fadethis

Lightweight jQuery plugin for fade-as-you-scroll features - lwiesel/jquery-fadethis

github.com

ダウンロードした「jquery.fadethis.min.js」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

head

<script src="jquery.fadethis.min.js"></script>
<script>
  $(window).fadeThis();
</script>

HTML

<div class="slide-left">左からスライド</div>
<div class="slide-right">右からスライド</div>
<div class="slide-top">上からスライド</div>
<div class="slide-bottom">下からスライド</div>

オプション　フェードイン・アウトを繰り返さない設定

<div class="slide-left" data-plugin-options='{"reverse": false}'>
1度だけ左からスライドして表示
</div>

まとめ

・フェードイン・アウトを上手く使いこなせばオシャレなHPが簡単にできます、スピードも調整できるので使ってみてはいかがでしょうか。

おわりっ