https://www.lichtzentrale.de/typo3temp/assets/vhs-assets-js-lzMaxiTeaser.js?1790244146

1Lz.View.MaxiTeaserNew = function (options) {
2	var self = this;
3
4	self.options = options;
5
6	self.element = $(self.options.element);
7	self.elementImage = self.element.find('.lz---maxiteaser__image');
8	self.image = null;
9
10	self.navigationHeight = $('.lz---header.lz---header--black')[0].clientHeight || 80;
11
12	this._construct = function () {
13		this._binds();
14        self.positionText();
15	};
16
17	this._binds = function () {
18		window.addEventListener('resize', function () {
19			self.positionText();
20			self.positionImage();
21		});
22
23		window.requestAnimationFrame(self.positionImage);
24	};
25
26	this.positionText = function () {
27		var el = self.element.find('.lz---maxiteaser__textfield-container.textfield-position-custom');
28
29		el.find('.lz---maxiteaser__textfield').css({
30			left: el.attr('data-textfield-position-x') + 'px',
31			top: el.attr('data-textfield-position-y') + 'px'
32		});
33	};
34
35	this.positionImage = function () {
36        var parallaxActive = !self.element.hasClass('no-parallax');
37
38		var windowWidth = window.innerWidth;
39		var windowHeight = window.innerHeight;
40		var windowScroll = window.scrollY;
41		var imageWidth = parseInt(self.elementImage.attr('data-image-width'));
42		var imageHeight = parseInt(self.elementImage.attr('data-image-height'));
43		var imageOffset = self.elementImage.offset();
44
45		// factor for height
46		var heightFactor = parseInt(self.elementImage.attr('data-height')) / 100;
47
48		// catch to height and to small
49		if (heightFactor > 1)
50			heightFactor = 1;
51		if (heightFactor < 0.1)
52			heightFactor = 0.1;
53
54		// calc image container height
55		var elementContainerHeight = parseInt(windowHeight * heightFactor);
56		if (elementContainerHeight > windowHeight - self.navigationHeight)
57			elementContainerHeight = parseInt(windowHeight - self.navigationHeight);
58        if (windowWidth < 992)
59            elementContainerHeight = 400;
60        if (windowWidth < 768)
61            elementContainerHeight = 200;
62
63		var positionY = 0, speed = 1, offsetTopBottom = 400, size = 'cover', shown = false, imageRatio = imageHeight / imageWidth
64
65		if ((windowScroll + windowHeight) > imageOffset.top && windowScroll < (imageOffset.top + elementContainerHeight))
66			shown = true;
67
68		// image is smaller then the window
69		/*if (windowWidth >= 768 && shown && windowWidth > imageWidth)
70			size = 'cover';*/
71
72		// image is bigger then the window
73		/*if (windowWidth >= 768 && shown && windowWidth < imageWidth) {
74
75			size = 'cover';
76
77			//positionX = parseInt((windowWidth - (imageWidth * (imageHeight / elementContainerHeight))) / 2);
78			//positionX = parseInt((windowWidth - imageWidth) / 2);
79
80		}*/
81
82        //console.log(imageRatio * windowWidth)
83
84		// calc y position of background if container is shown
85		// src: https://codepen.io/RenanB/pen/GZeBNg?editors=0010
86		if (windowWidth >= 768 && shown) {
87			var imageBottom = (windowScroll + windowHeight - imageOffset.top) * speed;
88			var imageTop = windowHeight + elementContainerHeight;
89
90			/*if (imageHeight < (elementContainerHeight + offsetTopBottom))
91				size = parseInt((((elementContainerHeight + offsetTopBottom) / imageHeight) + 0.01) * 100) + '%';*/
92
93			positionY = ((imageBottom / imageTop) * 100);
94		}
95
96		//self.elementImage.css('background-size', '');
97		//self.elementImage.css('background-position', '');
98
99        // set image container height and background position
100		if (shown && parallaxActive) {
101			self.elementImage.css('height', elementContainerHeight + 'px');
102			self.elementImage.css('background-position', 'center ' + positionY + '%');
103			self.elementImage.css('background-size', size);
104		}
105
106		window.requestAnimationFrame(self.positionImage);
107	};
108
109	this._construct();
110}
111
112