https://www.sincol-kys.co.jp/wp/wp-content/themes/sincol2021/js/delighters.js?ver=202105

1/*
2	Delighters - Add CSS animations to delight users as they scroll down.
3	(c) 2018 - Q42
4	Written by Martin Kool
5	https://github.com/Q42/delighters
6*/
7var Delighters = new (function() {
8	var self = this,
9			dels = this.dels = [],
10
11			// default options
12			options = {
13				attribute: 	'data-delighter',
14				classNames: ['delighter', 'started', 'ended'],
15				//start: 			0.75, // default start threshold
16				start: 			0.8, // default start threshold
17				end: 				0.75, // default end threshold
18				autoInit: 	true 	// initialize when DOMContentLoaded
19			};
20
21	document.addEventListener("DOMContentLoaded", function() {
22		if (options.autoInit) init();
23	});
24
25	function config(opts) {
26		for (var name in opts) options[name] = opts[name];
27	}
28
29	function init() {
30		document.addEventListener('scroll', scroll)
31		var els = document.querySelectorAll('[' + options.attribute + ']');
32
33		for (var i=0; i<els.length; i++) {
34			var el 			= els[i],
35					def 		= el.getAttribute(options.attribute, 2),
36					pairs 	= def.split(';'),
37					del 		= {};
38					del.start = options.start;
39					del.end = options.end;
40
41			for (var j=0; j<pairs.length; j++) {
42				var pair 	= pairs[j].split(':'),
43						name 	= pair[0],
44						val 	= isNaN(pair[1] * 1)? pair[1] : pair[1] * 1;
45				if (name) del[name] = (val === undefined)? true : val;
46			}
47
48			del.el = el;
49			del.id = dels.length;
50			dels.push(del);
51			el.classList.add(options.classNames[0])
52			if (del.debug) el.style.outline = 'solid red 4px';
53		}
54		scroll();
55	}
56
57	function scroll() {
58		var viewportHeight = window.innerHeight;
59		for (var i=0; i<dels.length; i++) {
60			var del = dels[i],
61					box = del.el.getBoundingClientRect(),
62					factorStart = box.top / viewportHeight,
63					factorEnd = box.bottom / viewportHeight;
64
65			if (del.debug) {
66				if (factorStart >= 0 && factorStart <= 1) {
67					if (!del.startLine) {
68						del.startLine = document.createElement('div')
69						document.body.appendChild(del.startLine);
70						del.startLine.style = 'position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:' + (del.start * 100) + 'vh';
71					}
72				}
73				if (((factorEnd < del.end) || (factorStart > 1)) && del.startLine) {
74					del.startLine.parentNode.removeChild(del.startLine);
75					delete del.startLine;
76				}
77			}
78			if (factorStart < del.start && !del.started) {
79				del.started = true;
80				//del.started = false;
81				del.el.classList.add(options.classNames[1])
82			}
83			else if (factorStart > del.start && del.started) {
84				del.started = false;
85				del.el.classList.remove(options.classNames[1])
86			}
87			if (factorEnd < del.end && !del.ended) {
88				del.ended = true;
89				del.el.classList.add(options.classNames[2])
90			}
91			else if (factorEnd > del.end && del.ended) {
92				del.ended = false;
93				del.el.classList.remove(options.classNames[2])
94			}
95		}
96	}
97
98	self.init = init;
99	self.config = config;
100})();