https://avalex.de/js/assets/js/components/hs.onscroll-animation.js

1/**
2 * Wrapper for creating animation when an element appear in the screen.
3 *
4 * @author Htmlstream
5 * @version 1.0
6 * @requires appear.js
7 *
8 */
9;
10(function ($) {
11    'use strict';
12
13    $.HSCore.components.HSOnScrollAnimation = {
14
15        /**
16         * Base configuration.
17         *
18         * @var Object _baseConfig
19         */
20        _baseConfig: {
21            bounds: -100,
22            debounce: 50,
23            inViewportClass: 'u-in-viewport',
24            animation: 'fadeInUp',
25            animationOut: false,
26            animationDelay: 0,
27            animationDuration: 1000,
28            afterShow: function () {
29            },
30            onShown: function () {
31            },
32            onHidded: function () {
33            }
34        },
35
36        /**
37         * Collection of all instances of the page.
38         *
39         * @var jQuery _pageCollection
40         */
41        _pageCollection: $(),
42
43
44        /**
45         * Initialization of animation.
46         *
47         * @param jQuery selector (optional)
48         * @param Object config (optional)
49         *
50         * @return jQuery _pageCollection - collection of initialized items.
51         */
52        init: function (selector, config) {
53
54            if (!selector || !$(selector).length) return;
55
56            var self = this;
57
58            this.config = config && $.isPlainObject(config) ? $.extend(true, {}, this._baseConfig, config) : this._baseConfig;
59
60            appear({
61                bounds: self.config['bounds'],
62                reappear: false,
63                debounce: self.config['debounce'],
64                elements: function () {
65                    return document.querySelectorAll(selector);
66                },
67                init: function () {
68                    $(selector).each(function (i, el) {
69
70                        var $this = $(el);
71
72                        if (!(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))) {
73                            if (!$this.data('HSAnimationElement')) {
74                                $this.data('HSAnimationElement', new HSAnimationElement($this, self.config));
75
76                                self._pageCollection = self._pageCollection.add($this);
77                            }
78                        } else {
79                            $this.addClass(self.config.inViewportClass);
80                        }
81
82                    });
83                },
84                appear: function (el) {
85                    var $el = $(el);
86
87                    if (!(/iPhone|iPad|iPod|Android/i.test(navigator.userAgent))) {
88                        if (!$el.hasClass(self.config.inViewportClass)) {
89                            $el.data('HSAnimationElement').show();
90                        }
91                    }
92                }
93
94            });
95
96            return this._pageCollection;
97
98        }
99
100    }
101
102    /**
103     * HSAnimationElement constructor function.
104     *
105     * @param jQuery element
106     * @param Object config
107     *
108     * @return undefined
109     */
110    function HSAnimationElement(element, config) {
111
112        if (!element || !element.length) return;
113
114        var self = this;
115
116        this.element = element;
117        this.config = config && $.isPlainObject(config) ? $.extend(true, {}, config, element.data()) : element.data();
118
119        if (!isFinite(this.config.animationDelay)) this.config.animationDelay = 0;
120        if (!isFinite(this.config.animationDuration)) this.config.animationDuration = 1000;
121
122        element.css({
123            'animation-duration': self.config.animationDuration + 'ms'
124        });
125
126    }
127
128    /**
129     * Shows element.
130     *
131     * @return undefined
132     */
133    HSAnimationElement.prototype.show = function () {
134
135        var self = this;
136
137        if (this.config.animationDelay) {
138            this.timeOutId = setTimeout(function () {
139
140                self.element
141                    .removeClass(self.config.animationOut)
142                    .addClass(self.config.animation + ' ' + self.config.inViewportClass);
143                self.config.afterShow.call(self.element);
144
145                self.callbackTimeoutId = setTimeout(function () {
146                    self.config.onShown.call(self.element);
147                }, self.config.animationDuration);
148
149            }, this.config.animationDelay);
150        }
151        else {
152            this.element
153                .removeClass(this.config.animationOut)
154                .addClass(this.config.animation + ' ' + this.config.inViewportClass);
155            this.config.afterShow.call(this.element);
156
157            this.callbackTimeoutId = setTimeout(function () {
158                self.config.onShown.call(self.element);
159            }, this.config.animationDuration);
160        }
161
162    }
163
164    /**
165     * Hides element.
166     *
167     * @return undefined
168     */
169    HSAnimationElement.prototype.hide = function () {
170
171        var self = this;
172
173        if (!this.element.hasClass(this.config.inViewportClass)) return;
174
175        if (this.config.animationOut) {
176
177            this.element
178                .removeClass(this.config.animation)
179                .addClass(this.config.animationOut);
180
181            this.callbackTimeoutId = setTimeout(function () {
182
183                self.element.removeClass(self.config.inViewportClass);

184                self.config.onHidded.call(self.element);
185
186            }, this.config.animationDuration);
187
188        }
189        else {
190
191            this.element.removeClass(this.config.inViewportClass + ' ' + this.config.animation);
192            this.config.onHidded.call(this.element);
193        }
194
195    }
196
197})(jQuery);