https://posxasianbistro.com/js/appear.js

1/*
2
3 * jQuery.appear
4
5 * https://github.com/bas2k/jquery.appear/
6
7 * http://code.google.com/p/jquery-appear/
8
9 * http://bas2k.ru/
10
11 *
12
13 * Copyright (c) 2009 Michael Hixson
14
15 * Copyright (c) 2012-2014 Alexander Brovikov
16
17 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
18
19 */
20
21(function($) {
22
23    $.fn.appear = function(fn, options) {
24
25
26
27        var settings = $.extend({
28
29
30
31            //arbitrary data to pass to fn
32
33            data: undefined,
34
35
36
37            //call fn only on the first appear?
38
39            one: true,
40
41
42
43            // X & Y accuracy
44
45            accX: 0,
46
47            accY: 0
48
49
50
51        }, options);
52
53
54
55        return this.each(function() {
56
57
58
59            var t = $(this);
60
61
62
63            //whether the element is currently visible
64
65            t.appeared = false;
66
67
68
69            if (!fn) {
70
71
72
73                //trigger the custom event
74
75                t.trigger('appear', settings.data);
76
77                return;
78
79            }
80
81
82
83            var w = $(window);
84
85
86
87            //fires the appear event when appropriate
88
89            var check = function() {
90
91
92
93                //is the element hidden?
94
95                if (!t.is(':visible')) {
96
97
98
99                    //it became hidden
100
101                    t.appeared = false;
102
103                    return;
104
105                }
106
107
108
109                //is the element inside the visible window?
110
111                var a = w.scrollLeft();
112
113                var b = w.scrollTop();
114
115                var o = t.offset();
116
117                var x = o.left;
118
119                var y = o.top;
120
121
122
123                var ax = settings.accX;
124
125                var ay = settings.accY;
126
127                var th = t.height();
128
129                var wh = w.height();
130
131                var tw = t.width();
132
133                var ww = w.width();
134
135
136
137                if (y + th + ay >= b &&
138
139                    y <= b + wh + ay &&
140
141                    x + tw + ax >= a &&
142
143                    x <= a + ww + ax) {
144
145
146
147                    //trigger the custom event
148
149                    if (!t.appeared) t.trigger('appear', settings.data);
150
151
152
153                } else {
154
155
156
157                    //it scrolled out of view
158
159                    t.appeared = false;
160
161                }
162
163            };
164
165
166
167            //create a modified fn with some additional logic
168
169            var modifiedFn = function() {
170
171
172
173                //mark the element as visible
174
175                t.appeared = true;
176
177
178
179                //is this supposed to happen only once?
180
181                if (settings.one) {
182
183
184
185                    //remove the check
186
187                    w.unbind('scroll', check);
188
189                    var i = $.inArray(check, $.fn.appear.checks);
190
191                    if (i >= 0) $.fn.appear.checks.splice(i, 1);
192
193                }
194
195
196
197                //trigger the original fn
198
199                fn.apply(this, arguments);
200
201            };
202
203
204
205            //bind the modified fn to the element
206
207            if (settings.one) t.one('appear', settings.data, modifiedFn);
208
209            else t.bind('appear', settings.data, modifiedFn);
210
211
212
213            //check whenever the window scrolls
214
215            w.scroll(check);
216
217
218
219            //check whenever the dom changes
220
221            $.fn.appear.checks.push(check);
222
223
224
225            //check now
226
227            (check)();
228
229        });
230
231    };
232
233
234
235    //keep a queue of appearance checks
236
237    $.extend($.fn.appear, {
238
239
240
241        checks: [],
242
243        timeout: null,
244
245
246
247        //process the queue
248
249        checkAll: function() {
250
251            var length = $.fn.appear.checks.length;
252
253            if (length > 0) while (length--) ($.fn.appear.checks[length])();
254
255        },
256
257
258
259        //check the queue asynchronously
260
261        run: function() {
262
263            if ($.fn.appear.timeout) clearTimeout($.fn.appear.timeout);
264
265            $.fn.appear.timeout = setTimeout($.fn.appear.checkAll, 20);
266
267        }
268
269    });