https://www.zouave.net/wp-content/themes/zouave/js/animate-theme.js?ver=1.0

1/**
2 * Created by Thibaut on 03/04/2018.
3 */
4
5'use strict';
6
7(function ($){
8
9    window.animate_theme = function() {
10
11        var animatedElements = document.querySelectorAll(".motion" +
12            "");
13
14        var autoActiveElements = document.querySelectorAll(".autoActive" +
15            "");
16
17        var parallaxedElements = document.querySelectorAll(".parallaxed" +
18            "");
19
20        var autoParallaxedElements = document.querySelectorAll(".autoParallaxed" +
21            "");
22
23        function scrollingMotion(init) {
24            var ticking = false;
25            var windowHeight = window.innerHeight;
26            var windowWidth = window.innerWidth;
27
28            if (!ticking) {
29
30                var scrollTop = window.pageYOffset;
31                for (var i = 0; i < animatedElements.length; i++) {
32
33                    var el = animatedElements[i];
34                    var elemRect = el.getBoundingClientRect();
35                    var offset = 0.85;
36
37                    if(el.classList.contains("offset-medium"))
38                        offset = 0.5;
39
40                    if(el.classList.contains("offset-mini"))
41                        offset = 0.9;
42
43                    if(el.classList.contains("onload-appear"))
44                        offset = 0.99999;
45
46                    if (elemRect.top - (windowHeight * offset) < 0) {
47                        el.classList.add('motion-animated');
48                    } else {
49                        if(!el.classList.contains("stay-active"))
50                            el.classList.remove('motion-animated');
51                    }
52                    if (elemRect.bottom < 0) {
53                        el.classList.remove('motion-animated');
54                    }
55                };
56
57                for (var i = 0; i < parallaxedElements.length; i++) {
58
59                    var el = parallaxedElements[i];
60
61                    if (windowWidth < 780 && el.classList.contains("no-responsive")) {
62
63                    }
64                    else
65                    {
66
67                        var el = parallaxedElements[i];
68                        var elemRect = el.getBoundingClientRect();
69
70                        var offset_bottom = 0.9;
71                        var offset_top = 0.3;
72
73                        var state = elemRect.top - (windowHeight * offset_bottom);
74
75                        var offset_y = el.getAttribute("offset-y");
76
77                        if (state < 0 && state > -windowHeight) {
78
79                            var intermediate_state = (windowHeight * offset_bottom) * (1 - offset_top);
80                            var percent_b_p = (-state / intermediate_state);
81
82                            console.log("intermediate_state = " + intermediate_state);
83                            console.log("state = " + state);
84                            console.log("percent_b_p = " + percent_b_p);
85
86                            if (percent_b_p > 1)
87                                percent_b_p = 1;
88
89                            el.style.transform = "translateY(" + (-percent_b_p * offset_y) + "px)";
90                        } else {
91                            el.classList.remove('motion-animate');
92                        }
93                    }
94                };
95
96                for (var i = 0; i < autoParallaxedElements.length; i++) {
97
98                    var el = autoParallaxedElements[i];
99
100
101                    if (el!= null && windowWidth < 780 && el.classList.contains("no-responsive")) {
102
103                    }
104                    else
105                    {
106
107                        var el = autoParallaxedElements[i];
108
109                        var h = document.documentElement,
110                            b = document.body,
111                            st = 'scrollTop',
112                            sh = 'scrollHeight';
113
114                        var percent = (h[st] || b[st]) / ((h[sh] || b[sh]) - h.clientHeight) * 100;
115                        var offset_y = el.getAttribute("offset-y");
116
117                        console.log("percent = " + percent);
118
119                        el.style.transform = "translateY(" + -((percent / 100) * offset_y) + "px)";
120                    }
121                };
122
123                if (windowWidth < 780) {
124                    for (var i = 0; i < autoActiveElements.length; i++) {
125
126                        var el = autoActiveElements[i];
127                        var elemRect = el.getBoundingClientRect();
128
129                        if(el.classList.contains("offset-medium"))
130                            offset = 0.5;
131
132                        if(el.classList.contains("onload-appear"))
133                            offset = 0.01;
134
135                        if (elemRect.top - (windowHeight * offset) < 0 && elemRect.bottom - (windowHeight * offset) > 0) {
136                            el.classList.add('active');
137                        } else {
138                            el.classList.remove('active');
139                        }
140                    }
141                    ;
142                }
143                ticking = false;
144            }
145            ticking = true;
146        }
147
148        window.addEventListener('scroll', function () {
149            scrollingMotion(false);
150        });
151
152        function onReadyDom()
153        {
154            scrollingMotion(false);
155        }
156
157        $(document).ready(function(){
158            onReadyDom();
159        });
160    }
161
162    animate_theme();
163
164
165})(jQuery);