https://www.dharmadrum.org/script/jquery.aniview.js

1(function($) {
2
3    //custom scroll replacement to allow for interval-based 'polling'
4    //rather than checking on every pixel.
5    var uniqueCntr = 0;
6    $.fn.scrolled = function(waitTime, fn) {
7        if (typeof waitTime === 'function') {
8            fn = waitTime;
9            waitTime = 200;
10        }
11        var tag = 'scrollTimer' + uniqueCntr++;
12        this.scroll(function() {
13            var self = $(this);
14            clearTimeout(self.data(tag));
15            self.data(tag, setTimeout(function() {
16                self.removeData(tag);
17                fn.call(self[0]);
18            }, waitTime));
19        });
20    };
21
22    $.fn.AniView = function(options) {
23
24        //some default settings. animateThreshold controls the trigger point
25        //for animation and is subtracted from the bottom of the viewport.
26        var settings = $.extend({
27            animateThreshold: 0,
28            scrollPollInterval: 20
29        }, options);
30
31        //keep the matched elements in a variable for easy reference
32        var collection = this;
33
34        //cycle through each matched element and wrap it in a block/div
35        //and then proceed to fade out the inner contents of each matched element
36        $(collection).each(function(index, element) {
37            $(element).wrap('<div class="av-container"></div>');
38            $(element).css('opacity', 0);
39        });
40
41        /**
42         * returns boolean representing whether element's top is coming into bottom of viewport
43         *
44         * @param HTMLDOMElement element the current element to check
45         */
46        function EnteringViewport(element) {
47            var elementTop = $(element).offset().top;
48            var viewportBottom = $(window).scrollTop() + $(window).height();
49            return (elementTop < (viewportBottom - settings.animateThreshold)) ? true : false;
50        }
51
52        /**
53         * cycle through each element in the collection to make sure that any
54         * elements which should be animated into view, are...
55         *
56         * @param collection of elements to check
57         */

58        function RenderElementsCurrentlyInViewport(collection) {
59            $(collection).each(function(index, element) {
60                var elementParentContainer = $(element).parent('.av-container');
61                if ($(element).is('[data-av-animation]') && !$(elementParentContainer).hasClass('av-visible') && EnteringViewport(elementParentContainer)) {
62                    $(element).css('opacity', 1);
63                    $(elementParentContainer).addClass('av-visible');
64                    $(element).addClass('animated ' + $(element).attr('data-av-animation'));
65                }
66            });
67        }
68
69        //on page load, render any elements that are currently/already in view
70        RenderElementsCurrentlyInViewport(collection);
71
72        //enable the scrolled event timer to watch for elements coming into the viewport
73        //from the bottom. default polling time is 20 ms. This can be changed using
74        //'scrollPollInterval' from the user visible options
75        $(window).scrolled(settings.scrollPollInterval, function() {
76            RenderElementsCurrentlyInViewport(collection);
77        });
78    };
79})(jQuery);