https://www.saintpaulsac.org/includes/parallax/parallax.1719244642.js

1if (!perpetuacms) {
2	var perpetuacms = {};
3}
4
5perpetuacms.parallax = (() => {
6	const body = $$("body")[0];
7	
8	let container = $("mainContainer");
9	let parallax_elements = [];
10	let parallax_elements_bg = [];
11
12	let scrolled = document.viewport.getScrollOffsets().top;
13	
14	const checkContainer = _container => typeof _container !== "undefined" && _container !== null;
15
16	const init = (_container, _options) => {
17		if (checkContainer(_container)) container = $(_container);
18		
19		getParallax();
20		calculate();
21	}
22
23	const getParallax = () => {
24		if (!checkContainer(container)) return false;
25
26		let _parallax_elements = container.select(".parallax");
27		let _parallax_elements_bg = container.select(".parallax_bg");
28
29		if (document.viewport.getWidth() > 768) {
30			body.addClassName("parallaxing");
31			parallax_elements = _parallax_elements;
32			parallax_elements_bg = _parallax_elements_bg;
33
34		} else {
35			body.removeClassName("parallaxing");
36			parallax_elements = [];
37			parallax_elements_bg = [];
38			_parallax_elements.invoke("removeAttribute", "style");
39
40			_parallax_elements_bg.forEach(e => {
41				e.setStyle({
42					"background-position": "inherit"
43				});
44				e.style.setProperty('--background-position', `inherit`);
45			})
46		}
47	};
48	
49	getParallax();
50
51	Element.prototype.parallax = function(rate,start,stop,orientation,opacity){
52		if (scrolled >= start && scrolled <= stop && document.viewport.getWidth() > 400){
53			this.pos = (scrolled * rate).toFixed(2) - (start * rate);
54			if (orientation == "horizontal") {
55				this.transform = "translate(" + this.pos + "px, 0px)";
56			} else {
57				this.transform = "translate(0px," + this.pos + "px)";
58			}
59			if (opacity == 1) {
60				this.opacity = (100 - scrolled * (100/(stop - start))) / 100;
61			} else {
62				this.opacity = 1;
63			}
64			this.setStyle({
65				"transform": this.transform,
66				"opacity": this.opacity,
67			});
68		} else if (scrolled <= start){
69			this.pos = start * rate;
70			this.transform = "translate(0px, 0px)";
71			this.opacity = 1;
72			this.setStyle({
73				"transform": this.transform,
74				"opacity": this.opacity,
75			});
76		};
77	};
78	Element.prototype.parallax_bg = function(rate,start,stop,offset,opacity){
79		if (scrolled >= start && scrolled <= stop && document.viewport.getWidth() > 768){
80			this.travel = (stop - start) * rate;
81			this.offset = offset;
82			this.pos = (scrolled * rate).toFixed(2) - (offset * rate);
83			this.setStyle({
84				"background-position": "center " + this.pos + "px",
85			});
86			this.style.setProperty('--background-position', `center ${this.pos}px`);
87		} else if (scrolled <= start){
88			this.travel = (stop - start) * rate;
89			this.offset = this.travel / 2;
90			this.pos = start;
91			this.setStyle({
92				"background-position": "center " + this.pos + "px",
93			});
94			this.style.setProperty('--background-position', `center ${this.pos}px`);
95		};
96	};
97
98	const calculate = () => {
99		if (!checkContainer(container)) return false;
100
101		scrolled = document.viewport.getScrollOffsets().top;
102		
103		parallax_elements.each(function(section){
104			var rate = section.dataset.rate || -0.2;
105			var orientation =  section.dataset.orientation || "vertical";
106			var offset =  section.cumulativeOffset().top;
107			var top = offset - document.viewport.getHeight();
108			var bottom = offset + document.viewport.getHeight();
109			section.parallax(rate,top,bottom,orientation,0);
110		});
111		parallax_elements_bg.each(function(section){
112			var rate = section.dataset.rate || -0.2;
113			var offset =  section.cumulativeOffset().top;
114			var top = offset - document.viewport.getHeight();
115			var bottom = offset + document.viewport.getHeight();
116			section.parallax_bg(rate,top,bottom,offset,0);
117		});
118	}
119	
120	calculate();
121
122	$(document).on("scroll", calculate);
123
124	window.addEventListener('resize', getParallax, true);
125	
126	return {
127		init: init,
128		calculate: calculate
129	}
130})();