Search code examples
javascriptscrollreveal.js

Scroll Reveal from Top to Bottom

I am trying to do something like scrolling a html element top to bottom. But Now I have is scrolling from bottom to top. I have found some ways like scrolling from left to right or right to left. Is there any solution? I am using the Scroll Reveal Plugin from here.

This is my Html Code.

<div data-sr="wait 0.8s">
    <div class="caption">
        <h3>Title</h3>
        <a class="btn ygn-btn" href="#">Download<i class="fa fa-download"></i></a></button>
    </div>
</div>

And my Javascript Code.

(function($) {
    'use strict';
    window.sr= new scrollReveal({
        reset: false,
        move: '50px',
        mobile: false
    });
})();
Solution

  • You should read the documentation carefully whenever using a plugin.

    The enter keyword controls the vector origin (direction) of your animation.

    <!-- Reveal with a downward motion -->
<div data-sr='enter top'> Foo </div>

    ref: https://github.com/jlmakes/scrollReveal.js/wiki/Keywords