https://gorodkam.ru/template/hd/js/jquery.appear.js

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