https://www.granmuseodelmundomaya.com.mx/assets/js/jquery.visible.js

1(function($){
2
3    /**
4* Copyright 2012, Digital Fusion
5* Licensed under the MIT license.
6* http://teamdf.com/jquery-plugins/license/
7*
8* @author Sam Sehnert
9* @desc A small plugin that checks whether elements are within
10* the user visible viewport of a web browser.
11* only accounts for vertical position, not horizontal.
12*/
13    var $w = $(window);
14    $.fn.visible = function(partial,hidden,direction){
15
16        if (this.length < 1)
17            return;
18
19        var $t = this.length > 1 ? this.eq(0) : this,
20            t = $t.get(0),
21            vpWidth = $w.width(),
22            vpHeight = $w.height(),
23            direction = (direction) ? direction : 'both',
24            clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true;
25
26        if (typeof t.getBoundingClientRect === 'function'){
27
28            // Use this native browser method, if available.
29            var rec = t.getBoundingClientRect(),
30                tViz = rec.top >= 0 && rec.top < vpHeight,
31                bViz = rec.bottom > 0 && rec.bottom <= vpHeight,
32                lViz = rec.left >= 0 && rec.left < vpWidth,
33                rViz = rec.right > 0 && rec.right <= vpWidth,
34                vVisible = partial ? tViz || bViz : tViz && bViz,
35                hVisible = partial ? lViz || lViz : lViz && rViz;
36
37            if(direction === 'both')
38                return clientSize && vVisible && hVisible;
39            else if(direction === 'vertical')
40                return clientSize && vVisible;
41            else if(direction === 'horizontal')
42                return clientSize && hVisible;
43        } else {
44
45            var viewTop = $w.scrollTop(),

46                viewBottom = viewTop + vpHeight,
47                viewLeft = $w.scrollLeft(),
48                viewRight = viewLeft + vpWidth,
49                offset = $t.offset(),
50                _top = offset.top,
51                _bottom = _top + $t.height(),
52                _left = offset.left,
53                _right = _left + $t.width(),
54                compareTop = partial === true ? _bottom : _top,
55                compareBottom = partial === true ? _top : _bottom,
56                compareLeft = partial === true ? _right : _left,
57                compareRight = partial === true ? _left : _right;
58
59            if(direction === 'both')
60                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
61            else if(direction === 'vertical')
62                return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop));
63            else if(direction === 'horizontal')
64                return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft));
65        }
66    };
67
68   var addAnimation = function(element){
69    $(element).each(function(i, el){
70      var el = $(el);
71      if (el.visible(true)) {
72        el.removeClass('visible').addClass('animated'); 
73      } 
74    });
75   }
76
77   var checkVisible = function(element){
78    $(element).each(function(i, el) {
79      var el = $(el);
80         if (el.visible(false)) {
81        el.addClass("visible"); 
82      } 
83    });     
84   }
85
86   $(window).load(function(){
87    checkVisible('.animate');
88   });
89
90   $(window).load(function(){
91    addAnimation('.animate');
92   });
93
94   $(window).scroll(function(event) {
95      addAnimation('.animate');
96   });
97
98})(jQuery);