Scroll Reveal Example
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }})
 }}16.jpg)
How to Use Scroll Reveal(Customize options according to requirements)
Add .reveal class to any tag for Archive
animation like this
// The Below Function is example of how to initlize
reveal
if
(Modernizr.csstransforms3d){
window.sr = ScrollReveal();
sr.reveal('.reveal', {
duration: 800,
delay: 400,
reset: true,
easing: 'linear',
scale: 1
});
}
window.sr = ScrollReveal();
sr.reveal('.reveal', {
duration: 800,
delay: 400,
reset: true,
easing: 'linear',
scale: 1
});
}
Scroll Reveal Settings options
// '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)',
// is the default reveal container. You
can pass either:
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'
// DOM Node, e.g. document.querySelector('.fooContainer')
// Selector, e.g. '.fooContainer'
easing: 'cubic-bezier(0.6, 0.2, 0.1, 1)',
// 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
// 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
// '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.
// 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
// 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) {},
beforeReset: function (domEl) {},
// Callbacks that fire for each completed element reveal,
and reset.
afterReveal: function (domEl)
{},
afterReset: function (domEl) {}
afterReset: function (domEl) {}