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