Documentation

logo

ScrollReveal (On Scroll smooth animation)

scrollreveal.js gives you smooth, on-scroll reveal animation with best performance.

Use of Scrollreveal

First of all include scrollreveal.js in your document before closing body tag </body>

Intialize ScrollReveal first,

<script>
    jQuery(document).ready(function($){
        initialize_scrollreveal();
        promo();//.... other scripts goes here ....
    });
</script>

Where initialize_scrollreveal() is already defined in scripts.js which goes like this,

(You don't need to define it again)


/* Initialize ScrollReveal.js plugin */
function initialize_scrollreveal(){
    (function($){
        
        window.sr = ScrollReveal();
        // Add class to <html> if ScrollReveal is supported
        if (sr.isSupported()) {
            document.documentElement.classList.add('sr');
        }
		
    })(jQuery);
}

After intializing, add .foo class to the element which you wanted to get reveal on-scroll. It works mostly for block elements, who has display property inline-block or block

For Example,


<!-- Apply ScrollReveal to Promo Style 2 -->
<section class="section-padding-small promo-2">
    <div class="container text-center">
        <h5 class="font-playfair foo">Lets debate on Webdesign's future</h5>
        <p class="subtext margin-top10 font-hind foo">Get in touch with us, as soon as possible</p>
        <div class="display-inline margin-top20 foo">
            <a class="bttn bttn-small bttn-blue bttn75 bttn-scale">Get Started</a>
        </div>
    </div>
</section>

Why do we wrapped .bttn in another <div> even if it has a property display:inline-block..?

Its becuase, when ScrollReveal triggers, it demolishes the property of a class .bttn-scale. So, we will not see any on-click button scale effect. Due to the reason to keep that effect we have wrapped the .bttn in another <div>. If you don't wanted to use .bttn-scale class then you no need to wrapped that button into another <div>.

Then modify a property of the element to be reveal smoothly and use the plugin as,

/* Promo page */
function promo(){
    (function($){
        // modify some scrollreveal parameters
        sr.reveal('.foo',{
            duration: 700,
            delay : 300,
            distance: '50px',
            viewFactor  : 0.5,
            easing :'ease-in-out'});
        
        //use on-scroll reveal animation
        sr.reveal('.promo-2 .foo',100);
    
    })(jQuery);
}

ScrollReveal properties and related default values,

// 'bottom', 'left', 'top', 'right'
origin: 'bottom',

// Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc.
distance: '20px',

// Time in milliseconds.
duration: 500,
delay: 0,

// Starting angles in degrees, will transition from these values to 0 in all axes.
rotate: { x: 0, y: 0, z: 0 },

// Starting opacity value, before transitioning to the computed opacity.
opacity: 0,

// Starting scale value, will transition from this value to 1
scale: 0.9,

// Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc.
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',

// `<html>` is the default reveal container. You can pass either:
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'
container: window.document.documentElement,

// true/false to control reveal animations on mobile.
mobile: true,

// true:  reveals occur every time elements become visible
// false: reveals occur once as elements become visible
reset: false,

// 'always' — delay for all reveal animations
// 'once'   — delay only the first time reveals occur
// 'onload' - delay only for animations triggered by first load
useDelay: 'always',

// Change when an element is considered in the viewport. The default value
// of 0.20 means 20% of an element must be visible for its reveal to occur.
viewFactor: 0.2,

// Pixel values that alter the container boundaries.
// e.g. Set `{ top: 48 }`, if you have a 48px tall fixed toolbar.
// --
// Visual Aid: https://scrollrevealjs.org/assets/viewoffset.png
viewOffset: { top: 0, right: 0, bottom: 0, left: 0 },

// Callbacks that fire for each triggered element reveal, and reset.
beforeReveal: function (domEl) {},
beforeReset: function (domEl) {},

// Callbacks that fire for each completed element reveal, and reset.
afterReveal: function (domEl) {},
afterReset: function (domEl) {}