https://www.morgus.com/dvd/MPV2/js/outofview.js

1;(function($) {
2  $.outOfView = {
3      init: function() {
4        $("[data-outofview]").css('transition', 'none').addClass('outofview');
5        window.setTimeout(function(){
6          $("[data-outofview]").css('transition', '');
7          $.outOfView.scroll();
8        }, 100);
9      }
10    , scroll: function() {
11       var $window = $(window)
12         , scrolled = $(window).scrollTop()
13         , windowHeight = $(window).height();
14
15       $("[data-outofview].outofview").each(function() {
16         var $this = $(this)
17           , dataCoefficient = $(this).data('outofview-coefficient')
18           , coefficient = dataCoefficient ? parseInt(dataCoefficient, 10) / 100 : 1
19           , windowHeightPadded = windowHeight * coefficient
20           , offsetTop = $this.offset().top
21           , offsetBottom = offsetTop + $this.outerHeight() * coefficient;
22
23          // If the distance from the bottom of the element to the top of the document
24          // is greater than the distance from the top of the window to the top of the
25          // document, OR the distance from the top of the element is less than the distance
26          // from the bottom of the window to the top of the document... remove the class.
27          // The element is in view.
28         if ( scrolled < offsetBottom || scrolled + windowHeightPadded > offsetTop) {
29           if ($this.data('outofview-timeout')) {
30             window.setTimeout(function() {
31               $this.removeClass('outofview');
32             }, parseInt($this.data('outofview-timeout'), 10));
33           } else {
34             $this.removeClass('outofview');
35           }
36         }
37       });
38       // Hidden...
39       $("[data-outofview]:not(.outofview)").each(function () {
40         var $this = $(this)
41           , dataCoefficient = $(this).data('outofview-coefficient')
42           , coefficient = dataCoefficient ? parseInt(dataCoefficient, 10) / 100 : 1
43           , windowHeightPadded = windowHeight * coefficient
44           , offsetTop = $this.offset().top
45           , offsetBottom = offsetTop + $this.outerHeight() * coefficient;
46
47          // If the distance from the bottom of the element to the top of the document
48          // is less than the distance from the top of the window to the top of the
49          // document, OR the distance from the top of the element is greater than the distance
50          // from the bottom of the window to the top of the document... add the class.
51          // The element is out of view.
52         if ( scrolled > offsetBottom || scrolled + windowHeightPadded < offsetTop) {
53           $(this).addClass('outofview');
54         }
55       });
56      }
57  };
58
59  // Reveal animations as they appear on screen
60  $(window).on('scroll', $.outOfView.scroll);
61  $.outOfView.init();
62})(jQuery);