├── .gitignore
├── LICENSE
├── README.md
├── min
    └── delighters.min.js
└── src
    ├── delighters.js
    ├── index.html
    └── style.css


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules
2 | gruntfile.js
3 | package-lock.json
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2018 Q42
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Delighters
 2 | ==========
 3 | 
 4 | Add CSS animations to delight users as they scroll down.
 5 | A tiny javascript library by [Q42](https://q42.com).
 6 | It was written by [Martin Kool](https://twitter.com/mrtnkl).
 7 | 
 8 | See the demo [here](https://q42.github.io/delighters)
 9 | 
10 | Usage
11 | ---
12 | 1. Include the script.
13 | ``` js
14 | <script type="text/javascript" src="delighters.js">
15 | ```
16 | 2. Add delighter attributes
17 | ```
18 | <div class="foo" data-delighter>
19 | ```
20 | 3. Style the delighter (or its children) using built-in classes `.started` and `.ended`
21 | 
22 | When the library loads, each [data-delighter] gets the .delighter class.
23 | ```
24 | .foo.delighter {
25 |   transition: all .3s ease-out;
26 |   transform: translateX(-100%);
27 |   opacity: 0;
28 | }
29 | ```
30 | The `.started` class is set when the top of [data-delighter] element is at 0.75 of the viewport (where 0 is top and 1 is bottom).
31 | ```
32 | .foo.delighter.started {
33 |   transform: none;
34 |   opacity: 1;
35 | }
36 | ```
37 | An extra `.ended` class is set when the bottom of [data-delighter] element is at 0.75 of the viewport (where 0 is top and 1 is bottom).
38 | ```
39 | .foo.delighter.started.ended {
40 |   border: solid red 10px;
41 | }
42 | ```
43 | How it works
44 | ---
45 | * Delighters.js toggles classes when you scroll down. You do the rest!
46 | * Each delighter gets a `.started` class when its *top* raises above 75% of the browser's viewport height
47 | * When the *bottom* of the delighter is at 75%, an extra class `.ended` is added
48 | * You can change any of these like so: `data-delighter="start:0.5;end:0.95;`
49 | * Remember: 0 = top, 1 = bottom
50 | * Values outside the viewport are allowed, such as `start:1.2;end:-0.3`
51 | 
52 | Debugging
53 | ---
54 | * Set the `data-delighter="debug"` flag to enable debugging for that delighter
55 | * This will give the delighter a red outline
56 | * Also, a dotted red hint line is shown when the delighter is within the viewport
57 | * The hint line is positioned at the defined start, which by default is `0.75`
58 | * The line is removed when the bottom of the delighter is above the end position, by default also `0.75`
59 | 
60 | Customizing
61 | ---
62 | By default, delighters.js intializes automatically when the DOM is ready, and with the following configuration:
63 | ```
64 |   options = {
65 |     attribute:  'data-delighter',
66 |     classNames: ['delighter', 'started', 'ended'],
67 |     start:      0.75, // default start threshold
68 |     end:        0.75, // default end threshold
69 |     autoInit:   true  // initialize when DOMContentLoaded
70 |   }
71 |  ```
72 | You can customize any or all of the above properties using:
73 | ```
74 |   Delighters.config({    
75 |     // set the default start threshold at the bottom
76 |     start: 1,
77 |     // let's call Delighters.init() manually later
78 |     autoInit: false 
79 |     // ... etc ...
80 |   })
81 | ```


--------------------------------------------------------------------------------
/min/delighters.min.js:
--------------------------------------------------------------------------------
1 | var Delighters=new function(){var t=this.dels=[],e={attribute:"data-delighter",classNames:["delighter","started","ended"],start:.75,end:.75,autoInit:!0};function s(){document.addEventListener("scroll",d);for(var s=document.querySelectorAll("["+e.attribute+"]"),a=0;a<s.length;a++){var n=s[a],i=n.getAttribute(e.attribute,2).split(";"),r={};r.start=e.start,r.end=e.end;for(var l=0;l<i.length;l++){var o=i[l].split(":"),c=o[0],u=isNaN(1*o[1])?o[1]:1*o[1];c&&(r[c]=void 0===u||u)}r.el=n,r.id=t.length,t.push(r),n.classList.add(e.classNames[0]),r.debug&&(n.style.outline="solid red 4px")}d()}function d(){for(var s=window.innerHeight,d=0;d<t.length;d++){var a=t[d],n=a.el.getBoundingClientRect(),i=n.top/s,r=n.bottom/s;a.debug&&(i>=0&&i<=1&&(a.startLine||(a.startLine=document.createElement("div"),document.body.appendChild(a.startLine),a.startLine.style="position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:"+100*a.start+"vh")),(r<a.end||i>1)&&a.startLine&&(a.startLine.parentNode.removeChild(a.startLine),delete a.startLine)),i<a.start&&!a.started?(a.started=!0,a.el.classList.add(e.classNames[1])):i>a.start&&a.started&&(a.started=!1,a.el.classList.remove(e.classNames[1])),r<a.end&&!a.ended?(a.ended=!0,a.el.classList.add(e.classNames[2])):r>a.end&&a.ended&&(a.ended=!1,a.el.classList.remove(e.classNames[2]))}}document.addEventListener("DOMContentLoaded",function(){e.autoInit&&s()}),this.init=s,this.config=function(t){for(var s in t)e[s]=t[s]}};


--------------------------------------------------------------------------------
/src/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 | */
 7 | var 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 | 				end: 				0.75, // 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 | })();
99 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <title>Delighters</title>
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
  6 |     <link href="style.css" type="text/css" rel="stylesheet" />
  7 |     <script type="text/javascript" src="delighters.js"></script>
  8 |   </head>
  9 |   <body>
 10 |     <article>
 11 |       <section data-delighter class="splash">
 12 |          <h1 data-delighter class="right">Delighters.JS</h1>
 13 |          <h2 data-delighter class="left">Add CSS animations to delight users as they scroll down.</h2>
 14 |          <p data-delighter="start:1" class="bottom">
 15 |             A tiny javascript library by <a target="_blank" href="https://q42.com">Q42</a><br>
 16 |             <a target="_blank" href="https://github.com/Q42/delighters"><code>https://github.com/Q42/delighters</code></a>
 17 |          </p>
 18 |       </section>
 19 |       <section data-delighter="start:0.3">
 20 |          <div class="box">1. Include the script</div>
 21 |          <div class="box">2. Add data-delighter attributes</div>
 22 |          <div class="box">3. Write your own CSS delighters</div>
 23 |       </section>
 24 |       <section>
 25 |          <h2 data-delighter class="right">Features</h2>
 26 |          <ul data-delighter>
 27 |             <li>Declarative</li>
 28 |             <li>Flexible</li>
 29 |             <li>Light footprint</li>
 30 |             <li>Framework-agnostic</li>
 31 |             <li>Supports desktop, mobile &amp; tablets</li>
 32 |             <li>Degrades gracefully to your default styling</li>
 33 |          </ul>
 34 |       </section>
 35 |       <section data-delighter="start:0.25">
 36 |          <h2 data-delighter class="left">Usage</h2>
 37 |          <p>1. Include the script</p>
 38 |          <pre>
 39 |    &lt;script type="text/javascript" src="delighters.js"></pre>
 40 |          <p>2. Add delighter attributes</p>
 41 |          <pre>
 42 |    &lt;div class="foo" data-delighter></pre>
 43 |          <p>
 44 |             3. Style the delighter (or its children) using built-in classes
 45 |             <code>.started</code> and <code>.ended</code>
 46 |          </p>
 47 |          <pre>
 48 |    /* when the library loads, each [data-delighter] 
 49 |       gets the .delighter class */
 50 | 
 51 |    .foo.delighter {
 52 |       transition: all .3s ease-out;
 53 |       transform: translateX(-100%);
 54 |       opacity: 0;
 55 |    }
 56 | 
 57 |    /* the .started class is set when the top
 58 |       of [data-delighter] is at 0.75 of the viewport 
 59 |       (where 0 is top and 1 is bottom) */
 60 | 
 61 |    .foo.delighter.started {
 62 |       transform: none;
 63 |       opacity: 1;
 64 |    }
 65 | 
 66 |    /* an extra .ended state is set when the bottom 
 67 |       of [data-delighter] is at 0.75 of the viewport
 68 |       (where 0 is top and 1 is bottom) */
 69 | 
 70 |    .foo.delighter.started.ended {
 71 |       border: solid red 10px;
 72 |    }</pre>
 73 |       </section>
 74 |       <section>
 75 |          <h2 data-delighter class="right">How it works</h2>
 76 |          <ul data-delighter>
 77 |             <li>Delighters.js toggles classes when you scroll down. You do the rest!</li>
 78 |             <li>Each delighter gets a <code>.started</code> class when its <b>top</b> raises above 75% of the browser's viewport height</li>
 79 |             <li>When the <b>bottom</b> of the delighter is at 75%, an extra class <code>.ended</code> is added</li>
 80 |             <li>You can change any of these like so: <code>data-delighter="start:0.5;end:0.95;</code></li>
 81 |             <li>Remember: 0 = top, 1 = bottom</li>
 82 |             <li>Values outside the viewport are allowed, such as <code>start:1.2;end:-0.3</code></li>
 83 |          </ul>
 84 |       </section>
 85 |       <section>
 86 |          <h2>Debugging</h2>
 87 |          <ul data-delighter="debug">
 88 |             <li>Set the <code>data-delighter="debug"</code> flag to enable debugging for that delighter</li>
 89 |             <li>This will give the delighter a red outline</li>
 90 |             <li>Also, a dotted red hint line is shown when the delighter is within the viewport</li>
 91 |             <li>The hint line is positioned at the defined start, which by default is <code>0.75</code></li>
 92 |             <li>The line is removed when the bottom of the delighter is above the end position, by default also <code>0.75</code></li>
 93 |          </ul>
 94 |       </section>
 95 |       <section data-delighter>
 96 |         <h2 data-d="right">Customizing</h2>
 97 |         <p>
 98 |           By default, delighters.js intializes automatically when the DOM is ready, and with the following configuration:
 99 |         </p>
100 |         <pre>
101 |   options = {
102 |     attribute:  'data-delighter',
103 |     classNames: ['delighter', 'started', 'ended'],
104 |     start:      0.75, // default start threshold
105 |     end:        0.75, // default end threshold
106 |     autoInit:   true  // initialize when DOMContentLoaded
107 |   }</pre>
108 |         <p>
109 |           You can customize any or all of the above properties using:
110 |         <pre>
111 |   Delighters.config({    
112 |     // set the default start threshold at the bottom
113 |     start: 1,
114 |     // let's call Delighters.init() manually later
115 |     autoInit: false 
116 |     // ... etc ...
117 |   })</pre>
118 |       </section>
119 |       <section>
120 |         <h1 data-delighter class="bottom">Enjoy!</h1>
121 |       </section>
122 |     </article>
123 |   </body>
124 | </html>


--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
 1 | html, body {
 2 |   margin: 0;
 3 | }
 4 | article {
 5 |   font-size: 2em;
 6 |   font-family: futura, sans-serif;
 7 |   overflow-x: hidden;
 8 | }
 9 | @media (max-width: 460px) {
10 |   article {
11 |     font-size: 1.5em;
12 |   }
13 | }
14 | section {
15 |   position: relative;
16 |   padding: 10vh 10vw;
17 |   min-height: 100vh;
18 |   color: #333;
19 | }
20 | section:nth-child(odd) {
21 |   background: #4dc6e6;
22 |   color: #fff;
23 | }
24 | section:nth-child(3) { background: #0aba58; color: #fff; }
25 | section:nth-child(4) { background: #f8c82d; color: #333; }
26 | pre {
27 |   font-size: .75em;
28 |   background: #222; color: #fff;
29 |   padding: 20px;
30 | }
31 | .box {
32 |   position: relative;
33 |   width: 50%; height: 30vh;
34 |   background: #ec484d; margin: 10px; box-shadow: 0 0 10px rgba(0,0,0,.3);
35 |   text-align: center;
36 |   color: #fff;
37 |   font-size: 0.8em;
38 |   padding: 10px;
39 | }
40 | .box:nth-child(2) { background: #f8c82d; }
41 | .box:nth-child(3) { background: #0aba58; }
42 | a {
43 |   color: inherit;
44 | }
45 | 
46 | .delighter.splash {
47 |   transition: all 2s ease-out;
48 | }
49 | .delighter.splash.ended {
50 |   background: #fff;
51 | }
52 | .delighter.right { transform:translate(-100%); opacity:0; transition: all .75s ease-out; }
53 | .delighter.right.started { transform:none; opacity:1; }
54 | 
55 | .delighter.left { transform:translate(100%); opacity:0; transition: all .75s ease-out; }
56 | .delighter.left.started { transform:none; opacity:1; }
57 | 
58 | .delighter.bottom { transform:translatey(300%); opacity:0; transition: all .75s ease-out; }
59 | .delighter.bottom.started { transform:none; opacity:1; }
60 | 
61 | .delighter li { opacity: 0; transform: translatey(400%); transition: all .7s ease-out; }
62 | .delighter.started li { opacity: 1; transform: none; }
63 | .delighter.started li:nth-child(1) { transition: all .7s ease-out .1s; }
64 | .delighter.started li:nth-child(2) { transition: all .7s ease-out .3s; }
65 | .delighter.started li:nth-child(3) { transition: all .7s ease-out .5s; }
66 | .delighter.started li:nth-child(4) { transition: all .7s ease-out .7s; }
67 | .delighter.started li:nth-child(5) { transition: all .7s ease-out .9s; }
68 | .delighter.started li:nth-child(6) { transition: all .7s ease-out 1.1s; }
69 | .delighter.started li:nth-child(7) { transition: all .7s ease-out 1.3s; }
70 | 
71 | .delighter pre {
72 |   display: block; transition: all 2s ease-out; opacity: 0;
73 |   padding: 20px 0;
74 |   width: 1px; overflow: hidden;
75 | }
76 | .delighter.started pre {
77 |   max-width: 99999px; width: 100%; opacity: 1;
78 | }
79 | .delighter .box { transition: all 1s ease-out; }
80 | .delighter .box:nth-child(1) { transform: translate(-100%, 0); }
81 | .delighter .box:nth-child(2) { transform: translate(170%, -70%); }
82 | .delighter .box:nth-child(3) { transform: translate(20%, 0%); }
83 | 
84 | .delighter.started .box:nth-child(1) { transform: translate(0, 0); }
85 | .delighter.started .box:nth-child(2) { transform: translate(70%, -70%); }
86 | .delighter.started .box:nth-child(3) { transform: translate(20%, -120%); }
87 | 
88 | 


--------------------------------------------------------------------------------