上下左右からスクロールでふわっと現れるフェードイン【jQueryプラグイン 】

まいど！ドスブイサポート高橋しゃちょーです

今回はJQueryとプラグインの「ScrollReveal.js」
によって指定した上下左右のどこからでも要素、画像などをふわっと出現する仕組みを作りたいと思います。

ホームページでよく見かける
スクロールすると要素がふわっといきなり出てくる動きありますよね。

デモ

こういった動きのサイトは見たことはありませんか？
これをJQueryで簡単に実装することが可能になります！

完成コピペコード

HTML

<div class="container fade-in">
    <img src="sample.jpg">
</div>

JQuery

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
    crossorigin="anonymous"></script>
<script src="https://unpkg.com/scrollreveal"></script>

<script>
    ScrollReveal().reveal('.fade-in')
</script>

たったのこれだけで実行します。
オプションを指定してあげることで、どこから何秒かけてなど
色々な設定が出来るようになりますので、オプションも併せて載せておきます。

「ScrollReveal.js」オプション一覧

お仕事のご依頼やお問い合わせはフォームやツイッターにてお気軽にお問い合わせ下さい。

お問い合わせフォーム

» 高橋しゃちょー (@osaka_dos) | Twitter