Page Scroll Animation Plugin delighters.js
Usage
Include the delighters.js.js file in your page.
1 | <script type="text/javascript" src="js/delighters.js.js"></script> |
HTML Structure
Add the data-delighter attribute to elements that need animation effects.
1 | <div> class="foo" data-delighter </div> |
CSS Styles
The built-in .started and .ended classes automatically apply styles to elements with the data-delighter attribute (or their child elements).
After the plugin is loaded, each data-delighter element is assigned a .delighter class.
1 2 3 4 5 | .foo.delighter { transition: all .3s ease-out; transform: translateX(-100%); opacity: 0;} |
The .started class is added to an element when it enters the viewport at the 0.75 position from the top (0 represents the very top, and 1 represents the very bottom).
1 2 3 4 | .foo.delighter.started { transform: none; opacity: 1;} |
The .ended class is added to an element when it reaches the 0.75 position from the top of the viewport (0 represents the very top, and 1 represents the very bottom).
1 2 3 | .foo.delighter.started.ended { border: solid red 10px;} |
Custom Configuration Options
Normally, the plugin initializes automatically after the DOM elements have finished loading. Its default configuration options are as follows:
1 2 3 4 5 6 7 | options = { attribute: 'data-delighter', classNames: ['delighter', 'started', 'ended'], start: 0.75, // Default start threshold end: 0.75, // Default end threshold autoInit: true // Initialize on DOMContentLoaded} |
You can modify the plugin's default configuration options using the following method:
1 2 3 4 5 6 7 | Delighters.config({ // Set the default start threshold at the bottom start: 1, // Call Delighters.init() manually later autoInit: false // ... etc ...}) |