https://petanque-sbv.de/classes/plugins/ngpluginparagraph/ngplugin…/js/textpicturesplit.js

1(function($) {
2    $.fn.sqpTextPictureSplit = function() {
3        $(this).each(function() {
4            var container = $(this),
5                textcontainer = container.children('.ngparatextpicturesplittext'),
6                text = textcontainer.children('div'),
7                picturecontainer = container.children('.ngparatextpicturesplitpicture'),
8                picture = picturecontainer.find('img'),
9                heightmode = container.attr('data-heightmode'),
10                parallax = parseInt(container.attr('data-parallax')),
11                maxOffset = 0,
12                fade = true,
13                pictureRatio = parseFloat(picture.attr('width')) / parseFloat(picture.attr('height'));
14
15            function placePicture() {
16                if (picture.css('position') === 'absolute') {
17                    var width = picturecontainer.width(),
18                        pictureHeight = Math.floor(width / pictureRatio),
19                        height = Math.floor(pictureHeight * (1 - parallax / 100)),
20                        textHeight = Math.ceil(text.outerHeight());
21
22                    if (height < textHeight) {
23                        height = textHeight;
24                        pictureHeight = Math.floor(height * (1 + parallax / 100));
25                        width = Math.floor(height * pictureRatio);
26                    }
27
28                    if (heightmode === 'window' && height < $(window).height()) {
29                        height = $(window).height();
30                        pictureHeight = Math.floor(height * (1 + parallax / 100));
31                        width = Math.floor(height * pictureRatio);
32                    }
33
34                    picturecontainer.css({
35                        'height': height + 'px'
36                    });
37                    textcontainer.css({
38                        'height': height + 'px'
39                    });
40
41                    var pictureWidth = Math.ceil(pictureHeight * pictureRatio),
42                        pictureLeft = Math.floor((picturecontainer.width() - pictureWidth) / 2);
43
44                    picture.css({
45                        'height': pictureHeight + 'px',
46                        'width': pictureWidth + 'px',
47                        'left': pictureLeft + 'px'
48                    });
49
50                    maxOffset = pictureHeight - height;
51                } else {
52                    picturecontainer.css({
53                        'height': 'inherit'
54                    });
55                    textcontainer.css({
56                        'height': 'inherit'
57                    });
58                    picture.css({
59                        'height': 'auto',
60                        'width': '100%'
61                    });
62                    maxOffset = 0;
63                }
64            }
65
66            function setPictureOffset() {
67
68                var containerTop = picturecontainer.offset().top,
69                    containerHeight = picturecontainer.height(),
70                    windowheight = $(window).height(),
71                    scrolltop = $(window).scrollTop();
72
73                if (parallax > 0) {
74                    var top = scrolltop + windowheight - containerTop,
75                        range = windowheight + containerHeight,
76                        offset = -Math.floor((1 - (top / range)) * maxOffset);
77                    picture.css('transform', 'translateY(' + offset + 'px)');
78                }
79
80                if (fade) {
81                    if (containerTop + containerHeight / 3 < scrolltop + windowheight) {
82                        container.addClass('ngparatextpicturesplitfxshow');
83                        fade = false;
84                    }
85                }
86            }
87
88            placePicture();
89            placePicture();
90
91            $(window).on('resize load', function() {
92                placePicture();
93                placePicture();
94                setPictureOffset();
95            });
96
97            $(window).on('scroll', setPictureOffset);
98        });
99    };
100})(jQuery);
101
102$(document).ready(function() {
103    $('.ngparatextpicturesplit').sqpTextPictureSplit();
104});