https://fanplus.co.jp/static/original/assets/js/delighters.js

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