Scroll Reveal | Cuba - Premium Admin Template By Pixelstrap

Loading...

###### Don't Miss Out! Our new update has been released.

###### Something you love is now on sale!

Buy now !

### Scroll Reveal

##### Scroll Reveal Example

Image caption 1
Image caption 2
Image caption 3
Image caption 4
Image caption 5
Image caption 6
Image caption 7
Image caption 8
Image caption 9
Image caption 10
Image caption 11
Image caption 12
Image caption 13
Image caption 14
Image caption 15
Image caption 16
Image caption 17
Image caption 18
Image caption 19
Image caption 20
Image caption 21
Image caption 22
Image caption 23
Image caption 24

##### 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
});
}

##### 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'
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
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) {}