ACT reveal
Triggers events when the top, the mid, or the bottom of an element is revealed during scrolling.
Usage
<div class="my-element A-reveal"></div>
<script type="text/javascript" src="ACT_reveal.js"></script>
<script>
$( '.my-element' ).one('reveal-mid', function(e){
$(this).removeClass('unrevealed')
})
</script>It triggers five different events on each element:
- reveal-top
fired when the top of the element is visible on screen - reveal-mid
fired when the middle of the element is visible on screen - reveal-bottom
fired when the bottom of the element is visible on screen - reveal-any
fired when the any part of the element is visible on screen - reveal
one of the most common uses of reveal, is when you want to animate an item as it comes on screen while you scroll. The reveal-top event, will fire too soon and the viewer might loose the interesting part of the animation. The reveal-mid is doing a better job but if the element has a very large height, its middle might come on screen too late. The reveal event might handle such occassions better. It fires when the top or bottom of the element have passed the edges of the screen plus a few more pixels (the 1/5 of the screen height), so you can ensure that the animation is not firing too soon.
The events are fired in every scroll step if they meet their conditions. Handle them with .one instead of .on to ensure that the handler is executed only once.
