https://chaletamkiental.de/assets/sqwpluginsfxband.js

1(function ($) {
2    'use strict';
3    $.fn.sqrSFXBand = function () {
4        $(this).each(function () {
5            var stage = $(this),
6                container = stage.children('div'),
7                images = container.children('img'),
8                size = parseFloat(stage.attr('data-size')) / 100,
9                effect = parseInt(stage.attr('data-effect')),
10                gutter = parseInt(stage.attr('data-gutter')),
11                inertia = parseInt(stage.attr('data-inertia')),
12                stagewidth = 0,
13                stageheight = 0,
14                w = $(window),
15                lastScroll = 0,
16                ticking = false,
17                i;
18
19            for (i = 0; i < images.length; i++) {
20                var image = images.eq(i);
21                image.data('ratio', parseFloat(image.attr('width')) / parseFloat(image.attr('height')));
22            }
23
24
25            function place() {
26                stagewidth = stage.width();
27                stageheight = Math.floor(Math.max(stagewidth, w.height()) * size);
28
29                var x = 0, i;
30
31                stage.css({
32                    'height': stageheight + 'px'
33                });
34
35                for (i = 0; i < images.length; i++) {
36                    var image = images.eq(i),
37                        picturewidth = Math.floor(stageheight * image.data('ratio'));
38
39                    image.css({
40                        'left': x + 'px',
41                        'top': '0',
42                        'width': picturewidth + 'px',
43                        'height': stageheight + 'px',
44                    });
45
46                    x += picturewidth;
47
48                    if (i < images.length - 1) x += gutter;
49                }
50
51                container.css({
52                    'height': stageheight + 'px',
53                    'width': x + 'px'
54                });
55            }
56
57            function requestSetOffset() {
58                lastScroll = w.scrollTop();
59
60                if (!ticking) {
61                    window.requestAnimationFrame(function () {
62                        setOffset();
63                        ticking = false;
64                    });
65
66                    ticking = true;
67                }
68            }
69
70            function setOffset() {
71                var stagetop = stage.offset().top,
72                    windowheight = w.height(),
73                    offset = Math.min(1, Math.max(0, (lastScroll + windowheight - stagetop) / (windowheight + stageheight)));
74
75                if (effect > 0) offset--;
76
77                var shift = offset * stagewidth * effect / 100;
78
79                container.css('transform', 'translate3d(' + shift + 'px,0,0)');
80            }
81
82
83            place();
84            place();
85            setOffset();
86
87            container.height();
88
89            if (inertia>0) container.css('transition','transform '+inertia+'ms ease-out');
90
91            w.on('resize', function () {
92                place();
93                place();
94                setOffset();
95            });
96
97            w.on('scroll', requestSetOffset);
98
99
100        });
101    };
102})(jQuery);
103
104$(document).ready(function () {
105    $('.sqrparasfxband').sqrSFXBand();
106});