Reveal - On scroll
Kodhus library supports some pretty neat effect to be used in your projects. On scroll Reveal is an effect that let's you create fluid and seamless animations of the elements based on their position and the scroll position of the page.
In simple terms, if you make an element in your page revealable, it initially will be hidden until you scroll the page down after the height of that element is fully in the view.
Usage
In order to make an element revealable, add data-aiv="true" as the element's attribute.
<ul data-aiv="true">
<li></li>
<li></li>
<li></li>
</ul>
Attributes you can set on the Revealing elements:
| Attribute | Value | Description |
|---|---|---|
| data-avr | true / false | Enables Reveal effect on the element |
| data-duration | Default: 1000 | Duration in milliseconds in which the effect takes place |
| data-delay | Default: 0 | Delaying in milliseconds the Reveal effect |
| data-aiv-children | true / false | If the Reveal effect should happen for each children individually |
| data-children-delay | Default: 0 | if data-aiv-children is set to true, the delay between revealing each children in milliseconds |
| data-timing-function | Default: ease-out | You can use default css timing functions or refer to Kodhus easings library. |
Tip: For timing functions, you can use Kodhus easings library.
In the following prototype, start scrolling to see the 3 images reveal into their place.