https://turtltech.netlify.app/assets/js/jquery.appear.js

1
2(function ($) {
3    $.fn.appear = function (fn, options) {
4
5        var settings = $.extend({
6
7            //arbitrary data to pass to fn
8            data: undefined,
9
10            //call fn only on the first appear?
11            one: true,
12
13            // X & Y accuracy
14            accX: 0,
15            accY: 0
16
17        }, options);
18
19        return this.each(function () {
20
21            var t = $(this);
22
23            //whether the element is currently visible
24            t.appeared = false;
25
26            if (!fn) {
27
28                //trigger the custom event
29                t.trigger('appear', settings.data);
30                return;
31            }
32
33            var w = $(window);
34
35            //fires the appear event when appropriate
36            var check = function () {
37
38                //is the element hidden?
39                if (!t.is(':visible')) {
40
41                    //it became hidden
42                    t.appeared = false;
43                    return;
44                }
45
46                //is the element inside the visible window?
47                var a = w.scrollLeft();
48                var b = w.scrollTop();
49                var o = t.offset();
50                var x = o.left;
51                var y = o.top;
52
53                var ax = settings.accX;
54                var ay = settings.accY;
55                var th = t.height();
56                var wh = w.height();
57                var tw = t.width();
58                var ww = w.width();
59
60                if (y + th + ay >= b &&
61                    y <= b + wh + ay &&
62                    x + tw + ax >= a &&
63                    x <= a + ww + ax) {
64
65                    //trigger the custom event
66                    if (!t.appeared) t.trigger('appear', settings.data);
67
68                } else {
69
70                    //it scrolled out of view
71                    t.appeared = false;
72                }
73            };
74
75            //create a modified fn with some additional logic
76            var modifiedFn = function () {
77
78                //mark the element as visible
79                t.appeared = true;
80
81                //is this supposed to happen only once?
82                if (settings.one) {
83
84                    //remove the check
85                    w.unbind('scroll', check);
86                    var i = $.inArray(check, $.fn.appear.checks);
87                    if (i >= 0) $.fn.appear.checks.splice(i, 1);
88                }
89
90                //trigger the original fn
91                fn.apply(this, arguments);
92            };
93
94            //bind the modified fn to the element
95            if (settings.one) t.one('appear', settings.data, modifiedFn);
96            else t.bind('appear', settings.data, modifiedFn);
97
98            //check whenever the window scrolls
99            w.scroll(check);
100
101            //check whenever the dom changes
102            $.fn.appear.checks.push(check);
103
104            //check now
105            (check)();
106        });
107    };
108
109    //keep a queue of appearance checks
110    $.extend($.fn.appear, {
111
112        checks: [],
113        timeout: null,
114
115        //process the queue
116        checkAll: function () {
117            var length = $.fn.appear.checks.length;
118            if (length > 0) while (length--) ($.fn.appear.checks[length])();
119        },
120
121        //check the queue asynchronously
122        run: function () {
123            if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
124            $.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
125        }
126    });
127
128    //run checks when these methods are called
129    $.each(['append', 'prepend', 'after', 'before', 'attr',
130        'removeAttr', 'addClass', 'removeClass', 'toggleClass',
131        'remove', 'css', 'show', 'hide'], function (i, n) {
132            var old = $.fn[n];
133            if (old) {
134                $.fn[n] = function () {
135                    var r = old.apply(this, arguments);
136                    $.fn.appear.run();
137                    return r;
138                }
139            }
140        });
141
142})(jQuery);