Author: | julianlloyd |
---|---|
Views Total: | 1,904 views |
Official Page: | Go to website |
Last Update: | March 4, 2021 |
License: | MIT |
Preview:

Description:
scrollReveal.js is a simple yet amazing javascript library that reveals invisible HTML elements with fade-in transitions while you scroll down the page and the invisible HTML elements are in the viewport.
How to use it:
Include the necessary scrollReveal.js library at the end of the document.
<script src="scrollReveal.js"></script>
Create an element you want to animate.
<h1 class="demo">scrollReveal.js</h1> <p class="demo">Declarative on-scroll reveal animations.</p>
Initialize with default settings.
ScrollReveal().reveal('.headline')
All Default settings and callback functions.
ScrollReveal({ // 'bottom', 'left', 'top', 'right' origin: 'bottom', // Can be any valid CSS distance, e.g. '5rem', '10%', '20vw', etc. distance: '0', // Time in milliseconds. duration: 600, delay: 0, interval: 0, cleanup: false // 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: 1, // Accepts any valid CSS easing, e.g. 'ease', 'ease-in-out', 'linear', etc. easing: 'cubic-bezier(0.5, 0, 0, 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 desktop. desktop: true, // 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.0, // 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) {} })
API methods.
// Reverses the effects. ScrollReveal().clean('.demo'); // Invokes all previous reveal() calls (with the appropriate arguments), to capture any new elements added to the DOM. ScrollReveal().reveal('.demo', { //options }); // Destroys the instance. ScrollReveal().destroy();
Changelog:
v4.0.9 (2021-03-04)
- Bugfixed
Hi, pretty good tool. Here I leave another tool that allows handling animations declaratively, http://anijs.github.io/, using it you can work with many events, not just scrolling.
Hey, thanks for sharing scrollReveal!
I’ve dropped support for v1, and the latest v2.0.1 (at the time of writing) has a huge number of improvements, bug fixes and a new wiki.
This post is out of date, for example data-sr has replaced the more verbose data-scrollreveal attribute. For accurate, up-to-date information, please see:
https://github.com/julianlloyd/scrollReveal.js/wiki/Getting-Started
Cheers!