https://www.e-norm.co.jp/js/universal-parallax.js

1'use strict';
2
3/**
4* @version 1.3.2
5* @author Marius Hansen <[email protected]>
6* @license MIT
7* @description Easy parallax plugin using pure javascript. Cross browser support, including mobile platforms. Based on goodparallax
8* @copyright © Marius Hansen 2019
9*/
10
11var windowHeight = window.innerHeight,
12    windowHeightExtra = 0;
13var safari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent),
14    mobile = /Mobi/.test(navigator.userAgent);
15
16// check if safari - extend height
17if (safari && !mobile) {
18	windowHeightExtra = window.outerHeight - window.innerHeight;
19}
20
21if (mobile) {
22	windowHeight = window.screen.availHeight; // stops from jumping
23	windowHeightExtra = (window.screen.availHeight - window.innerHeight) / 2; // prevents white spaces
24}
25
26// position parallax
27var positionParallax = function positionParallax(container, speed, parallax, elem) {
28	var bgScroll = container.top / speed - windowHeightExtra;
29	parallax[elem].style.top = bgScroll + 'px';
30};
31
32// animate parallax
33var animateParallax = function animateParallax(parallax, speed) {
34	for (var i = 0; parallax.length > i; i++) {
35		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
36
37		// only animate if on screen
38		if (container.top + container.height >= 0 && container.top <= windowHeight) {
39			positionParallax(container, speed, parallax, i);
40		}
41	}
42};
43
44// determine height
45var calculateHeight = function calculateHeight(parallax, speed) {
46	for (var i = 0; parallax.length > i; i++) {
47		var container = parallax[i].parentElement.parentElement.getBoundingClientRect();
48		var containerTop = parallax[i].parentElement.parentElement.offsetTop;
49		var elemOffsetTop = (windowHeight - container.height) / 2;
50
51		// set bgHeight & check if it needs to stretch beyond container bottom
52		var bgHeight = windowHeight > container.height + containerTop ? container.height + containerTop - containerTop / speed : container.height + (elemOffsetTop - elemOffsetTop / speed) * 2;
53
54		parallax[i].style.height = bgHeight + windowHeightExtra * 2 + 'px';
55		positionParallax(container, speed, parallax, i);
56	}
57};
58
59var universalParallax = function universalParallax() {
60	var up = function up(parallax, speed) {
61
62		// check that speed is not a negative number
63		if (speed < 1) {
64			speed = 1;
65		}
66
67		// set height on elements
68		calculateHeight(parallax, speed);
69
70		// recalculate height on resize
71		if (!mobile) {
72			window.addEventListener('resize', function () {
73				windowHeight = window.innerHeight;
74				calculateHeight(parallax, speed);
75			});
76		}
77
78		// Add scroll event listener
79		window.addEventListener('scroll', function () {
80			animateParallax(parallax, speed);
81		});
82	};
83
84	// Ready all elements
85	this.init = function (param) {
86		if (typeof param === 'undefined') {
87			param = {};
88		}
89
90		param = {
91			speed: typeof param.speed !== 'undefined' ? param.speed : 1.1,
92			className: typeof param.className !== 'undefined' ? param.className : 'parallax'
93		};
94		var parallax = document.getElementsByClassName(param.className);
95
96		for (var i = 0; parallax.length > i; i++) {
97			// make container div
98			var wrapper = document.createElement('div');
99			parallax[i].parentNode.insertBefore(wrapper, parallax[i]);
100			wrapper.appendChild(parallax[i]);
101			var parallaxContainer = parallax[i].parentElement;
102			parallaxContainer.className += 'parallax__container';
103
104			// parent elem need position: relative for effect to work - if not already defined, add it
105			if (window.getComputedStyle(parallaxContainer.parentElement, null).getPropertyValue('position') !== 'relative') {
106				parallaxContainer.parentElement.style.position = 'relative';
107			}
108
109			var imgData = parallax[i].dataset.parallaxImage;
110			// add image to div if none is specified
111			if (typeof imgData !== 'undefined') {
112				parallax[i].style.backgroundImage = 'url(' + imgData + ')';
113				// if no other class than .parallax is specified, add CSS
114				if (parallax[i].classList.length === 1 && parallax[i].classList[0] === 'parallax') {
115					parallax[i].style.backgroundRepeat = 'no-repeat';
116					parallax[i].style.backgroundPosition = 'center';
117					parallax[i].style.backgroundSize = 'cover';
118				}
119			}
120		};
121
122		// when page is loaded && init completed -> run function
123		document.addEventListener('readystatechange', function (event) {
124			if (event.target.readyState === 'complete') {
125				up(parallax, param.speed);
126			}
127		});
128	};
129};