More than 3 years have passed since last update.

ScrollReveal.jsでええ感じのパララックス効果を実装する

Posted at 2020-07-03

#スクロールすると画像がふわって出てくる感じのを実装する
簡単にパララックス効果を実装できる便利ライブラリをcdnで以下のようにheadタグに記述
<script src="https://unpkg.com/scrollreveal"></script>

次にhtmlを編集。marginはスクロールするスペースを与えるため

index.html

    <div class="animation" style="margin-top: 1000px;">
        <img src="./images/image1.jpg">
    </div>

次にjs

app.js

$(function () {
    ScrollReveal().reveal('.animation', {
        delay: 500,
        duration: 2000,
    });
});

おしまい。