2 |
3 |
8 |
--------------------------------------------------------------------------------
/img/icons/d1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
17 |
--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
1 | /**
2 | * main.js
3 | * http://www.codrops.com
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2016, Codrops
9 | * http://www.codrops.com
10 | */
11 | ;(function(window) {
12 |
13 | 'use strict';
14 |
15 | // some helper functions
16 | /**
17 | * from https://davidwalsh.name/javascript-debounce-function
18 | */
19 | function debounce(func, wait, immediate) {
20 | var timeout;
21 | return function() {
22 | var context = this, args = arguments;
23 | var later = function() {
24 | timeout = null;
25 | if (!immediate) func.apply(context, args);
26 | };
27 | var callNow = immediate && !timeout;
28 | clearTimeout(timeout);
29 | timeout = setTimeout(later, wait);
30 | if (callNow) func.apply(context, args);
31 | };
32 | };
33 | /**
34 | * from http://stackoverflow.com/a/6700
35 | */
36 | Object.size = function(obj) {
37 | var size = 0, key;
38 | for (key in obj) {
39 | if (obj.hasOwnProperty(key)) size++;
40 | }
41 | return size;
42 | };
43 |
44 | var mainContainer = document.querySelector('.landing-layout'),
45 | triggerCtrl = mainContainer.querySelector('.button--trigger'),
46 | landingWrapper = mainContainer.querySelector('.landing-wrap'),
47 | winsize = {width : window.innerWidth, height : window.innerHeight},
48 | soundCtrl = mainContainer.querySelector('button.button--sound'),
49 | isAudioOn = true,
50 |
51 | // from http://stackoverflow.com/q/31184533 - original work: http://www.kaiserapps.com/lab/#ub
52 | bubbles = {
53 | canvas : null,
54 | ctx : null,
55 | mousex : winsize.width - 30,
56 | mousey : winsize.height - 30,
57 | cntr : 0,
58 | circleArr : new Array(),
59 | requestId : undefined,
60 | init : function() {
61 | this.canvas = document.getElementById('bubbles');
62 | this.ctx = this.canvas.getContext('2d');
63 | this.canvas.width = winsize.width;
64 | this.canvas.height = winsize.height;
65 |
66 | // Window resize.
67 | var self = this;
68 | this.debounceResize = debounce(function() {
69 | winsize = {width : window.innerWidth, height : window.innerHeight};
70 | self.canvas.height = winsize.height;
71 | self.canvas.width = winsize.width;
72 | }, 10);
73 | window.addEventListener('resize', this.debounceResize);
74 | },
75 | loop : function() {
76 | this.requestId = requestAnimationFrame(bubbles.loop.bind(this));
77 | this.update();
78 | this.render();
79 | },
80 | update : function() {
81 | if( this.cntr++ % 1 == 0 ) {
82 | this.createCircle();
83 | }
84 |
85 | for(var circle in this.circleArr) {
86 | circle = this.circleArr[circle];
87 | var max = 2, min = -2;
88 | circle.x += Math.floor(Math.random() * (max - min + 1)) + min;
89 | circle.y -= Math.random()*15;
90 | }
91 |
92 | while(this.circleArr.length > 2 && (this.circleArr[0].x + this.circleArr[0].s > winsize.width || this.circleArr[0].x + this.circleArr[0].s < 0 || this.circleArr[0].y + this.circleArr[0].s > winsize.height || this.circleArr[0].y + this.circleArr[0].s < 0) ){
93 | this.circleArr.shift();
94 | }
95 | },
96 | render : function() {
97 | // clear
98 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
99 | // draw the data
100 | for(var circle in this.circleArr) {
101 | var current = this.circleArr[circle];
102 | this.drawCircle(current.x, current.y, current.s);
103 | }
104 | },
105 | createCircle : function() {
106 | var tmp = this.circleArr[this.circleArr.length-1];
107 |
108 | this.circleArr[this.circleArr.length] = {
109 | x: this.mousex,
110 | y: this.mousey,
111 | s: Math.random()*winsize.height/100
112 | };
113 | },
114 | drawCircle : function(x, y, radius) {
115 | this.ctx.fillStyle = "#012754";
116 | this.ctx.beginPath();
117 | this.ctx.arc(x,y,radius, 0, Math.PI*2, false);
118 | this.ctx.closePath();
119 | this.ctx.fill();
120 | },
121 | start : function() {
122 | if( !this.requestId ) {
123 | document.onmousemove = this.getMouseCoordinates.bind(this);
124 | this.loop();
125 | }
126 | },
127 | stop : function() {
128 | if( this.requestId ) {
129 | window.cancelAnimationFrame(this.requestId);
130 | this.requestId = undefined;
131 | document.onmousemove = null;
132 | // clear
133 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
134 | }
135 | },
136 | getMouseCoordinates : function(ev) {
137 | var ev = ev || window.event;
138 | this.mousex = ev.pageX;
139 | this.mousey = ev.pageY;
140 | }
141 | },
142 | audio = {
143 | sounds : {},
144 | sources : [{
145 | lake : 'sounds/quietlake070808.mp3',
146 | splash : 'sounds/Water Splash-SoundBible.com-800223477.mp3',
147 | underwater : 'sounds/Underwater_Pool-Mike_Koenig-355864284.mp3'
148 | }],
149 | load : function(callback) {
150 | this.totalFiles = Object.size(this.sources[0]);
151 |
152 | for(var key in this.sources[0]) {
153 | var sound = new Howl({ src: [this.sources[0][key]] }), self = this;
154 | sound.once('load', function(key) {
155 | return function() {
156 | self.sounds[key] = this;
157 | if( Object.size(self.sounds) === self.totalFiles ) {
158 | if( typeof callback === 'function' ) {
159 | callback();
160 | }
161 | }
162 | };
163 | }(key));
164 | }
165 | },
166 | loop : function(name) {
167 | this.sounds[name].loop(true);
168 | },
169 | volume : function(name, val) {
170 | this.sounds[name].volume(val);
171 | },
172 | play : function(name, time) {
173 | this.sounds[name].stop();
174 | var self = this;
175 | setTimeout(function() {
176 | self.sounds[name].play();
177 | }, time || 0);
178 | },
179 | stop : function(name) {
180 | this.sounds[name].stop();
181 | },
182 | fadeIn : function(name, time) {
183 | var self = this;
184 | setTimeout(function() {
185 | self.sounds[name].fade(0,1,1500);
186 | }, time || 0);
187 | },
188 | fadeOut : function(name, time) {
189 | var self = this;
190 | setTimeout(function() {
191 | self.sounds[name].fade(1,0,1500);
192 | }, time || 0);
193 | },
194 | toggleMuteAll : function(state) {
195 | for(var key in this.sounds) {
196 | this.sounds[key].mute(state);
197 | }
198 | }
199 | };
200 |
201 | function init() {
202 | var loadedMediaItems = 0,
203 | checkloaded = function() {
204 | ++loadedMediaItems;
205 | if(loadedMediaItems === 2) {
206 | mainContainer.classList.add('landing-layout--loaded');
207 | // Play lake sound.
208 | audio.loop('lake');
209 | audio.play('lake');
210 | // Init the bubbles canvas animation.
211 | bubbles.init();
212 | // Init/Bind Events
213 | initEvents();
214 | }
215 | };
216 |
217 | // Preload images..
218 | imagesLoaded(landingWrapper, { background: true }, checkloaded);
219 | // Preload sounds..
220 | audio.load(checkloaded);
221 | }
222 |
223 | function initEvents() {
224 | // Trigger the main animation.
225 | triggerCtrl.addEventListener('click', function() {
226 | toggleMenu();
227 | });
228 | // Mute sounds.
229 | soundCtrl.addEventListener('click', function() {
230 | if( !isAudioOn ) {
231 | audio.toggleMuteAll(false);
232 | soundCtrl.classList.remove('button--sound-off');
233 | }
234 | else {
235 | audio.toggleMuteAll(true);
236 | soundCtrl.classList.add('button--sound-off');
237 | }
238 | isAudioOn = !isAudioOn;
239 | });
240 | }
241 |
242 | function toggleMenu() {
243 | var isOpen = mainContainer.classList.contains('landing-layout--open');
244 | // Toggle class on the main container.
245 | mainContainer.classList.toggle('landing-layout--open');
246 |
247 | if( isOpen ) { // close it.
248 | // Stop the bubbles canvas animation.
249 | bubbles.stop();
250 | // Sounds..
251 | audio.fadeOut('underwater');
252 | audio.play('splash', 700);
253 | audio.loop('lake');
254 | audio.fadeIn('lake', 700);
255 | }
256 | else { // open it.
257 | // Start the bubbles canvas animation.
258 | bubbles.start();
259 | // Sounds..
260 | audio.fadeOut('lake');
261 | audio.volume('splash', 0.5);
262 | audio.play('splash', 700);
263 | audio.loop('underwater');
264 | audio.play('underwater', 700);
265 | audio.fadeIn('underwater');
266 | }
267 | }
268 |
269 | init();
270 |
271 | })(window);
--------------------------------------------------------------------------------
/img/icons/sw1.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
81 |
--------------------------------------------------------------------------------
/js/main_3.js:
--------------------------------------------------------------------------------
1 | /**
2 | * main.js
3 | * http://www.codrops.com
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2016, Codrops
9 | * http://www.codrops.com
10 | */
11 | ;(function(window) {
12 |
13 | 'use strict';
14 |
15 | // some helper functions
16 | /**
17 | * from https://davidwalsh.name/javascript-debounce-function
18 | */
19 | function debounce(func, wait, immediate) {
20 | var timeout;
21 | return function() {
22 | var context = this, args = arguments;
23 | var later = function() {
24 | timeout = null;
25 | if (!immediate) func.apply(context, args);
26 | };
27 | var callNow = immediate && !timeout;
28 | clearTimeout(timeout);
29 | timeout = setTimeout(later, wait);
30 | if (callNow) func.apply(context, args);
31 | };
32 | };
33 | /**
34 | * from http://stackoverflow.com/a/6700
35 | */
36 | Object.size = function(obj) {
37 | var size = 0, key;
38 | for (key in obj) {
39 | if (obj.hasOwnProperty(key)) size++;
40 | }
41 | return size;
42 | };
43 |
44 | var mainContainer = document.querySelector('.landing-layout'),
45 | triggerCtrl = mainContainer.querySelector('.button--trigger'),
46 | landingWrapper = mainContainer.querySelector('.landing-wrap'),
47 | winsize = {width : window.innerWidth, height : window.innerHeight},
48 | soundCtrl = mainContainer.querySelector('button.button--sound'),
49 | isAudioOn = true,
50 |
51 | // from http://stackoverflow.com/q/31184533 - original work: http://www.kaiserapps.com/lab/#ub
52 | bubbles = {
53 | canvas : null,
54 | ctx : null,
55 | mousex : winsize.width - 30,
56 | mousey : winsize.height - 30,
57 | cntr : 0,
58 | circleArr : new Array(),
59 | requestId : undefined,
60 | init : function() {
61 | this.canvas = document.getElementById('bubbles');
62 | this.ctx = this.canvas.getContext('2d');
63 | this.canvas.width = winsize.width;
64 | this.canvas.height = winsize.height;
65 |
66 | // Window resize.
67 | var self = this;
68 | this.debounceResize = debounce(function() {
69 | winsize = {width : window.innerWidth, height : window.innerHeight};
70 | self.canvas.height = winsize.height;
71 | self.canvas.width = winsize.width;
72 | }, 10);
73 | window.addEventListener('resize', this.debounceResize);
74 | },
75 | loop : function() {
76 | this.requestId = requestAnimationFrame(bubbles.loop.bind(this));
77 | this.update();
78 | this.render();
79 | },
80 | update : function() {
81 | if( this.cntr++ % 1 == 0 ) {
82 | this.createCircle();
83 | }
84 |
85 | for(var circle in this.circleArr) {
86 | circle = this.circleArr[circle];
87 | var max = 2, min = -2;
88 | circle.x += Math.floor(Math.random() * (max - min + 1)) + min;
89 | circle.y -= Math.random()*15;
90 | }
91 |
92 | while(this.circleArr.length > 2 && (this.circleArr[0].x + this.circleArr[0].s > winsize.width || this.circleArr[0].x + this.circleArr[0].s < 0 || this.circleArr[0].y + this.circleArr[0].s > winsize.height || this.circleArr[0].y + this.circleArr[0].s < 0) ){
93 | this.circleArr.shift();
94 | }
95 | },
96 | render : function() {
97 | // clear
98 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
99 | // draw the data
100 | for(var circle in this.circleArr) {
101 | var current = this.circleArr[circle];
102 | this.drawCircle(current.x, current.y, current.s);
103 | }
104 | },
105 | createCircle : function() {
106 | var tmp = this.circleArr[this.circleArr.length-1];
107 |
108 | this.circleArr[this.circleArr.length] = {
109 | x: this.mousex,
110 | y: this.mousey,
111 | s: Math.random()*winsize.height/100
112 | };
113 | },
114 | drawCircle : function(x, y, radius) {
115 | this.ctx.fillStyle = "rgba(255,255,255,0.5)";
116 | this.ctx.beginPath();
117 | this.ctx.arc(x,y,radius, 0, Math.PI*2, false);
118 | this.ctx.closePath();
119 | this.ctx.fill();
120 | },
121 | start : function() {
122 | if( !this.requestId ) {
123 | document.onmousemove = this.getMouseCoordinates.bind(this);
124 | this.loop();
125 | }
126 | },
127 | stop : function() {
128 | if( this.requestId ) {
129 | window.cancelAnimationFrame(this.requestId);
130 | this.requestId = undefined;
131 | document.onmousemove = null;
132 | // clear
133 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
134 | }
135 | },
136 | getMouseCoordinates : function(ev) {
137 | var ev = ev || window.event;
138 | this.mousex = ev.pageX;
139 | this.mousey = ev.pageY;
140 | }
141 | },
142 | audio = {
143 | sounds : {},
144 | sources : [{
145 | lake : 'sounds/Whales Spouting Out Water-SoundBible.com-966355632.mp3',
146 | splash : 'sounds/Depth Charge 2-SoundBible.com-338644910.mp3',
147 | splash2 : 'sounds/Water Splash-SoundBible.com-800223477.mp3',
148 | underwater : 'sounds/156011__hdvideoguy__scubadiving-01.mp3'
149 | }],
150 | load : function(callback) {
151 | this.totalFiles = Object.size(this.sources[0]);
152 |
153 | for(var key in this.sources[0]) {
154 | var sound = new Howl({ src: [this.sources[0][key]] }), self = this;
155 | sound.once('load', function(key) {
156 | return function() {
157 | self.sounds[key] = this;
158 | if( Object.size(self.sounds) === self.totalFiles ) {
159 | if( typeof callback === 'function' ) {
160 | callback();
161 | }
162 | }
163 | };
164 | }(key));
165 | }
166 | },
167 | loop : function(name) {
168 | this.sounds[name].loop(true);
169 | },
170 | volume : function(name, val) {
171 | this.sounds[name].volume(val);
172 | },
173 | play : function(name, time) {
174 | this.sounds[name].stop();
175 | var self = this;
176 | setTimeout(function() {
177 | self.sounds[name].play();
178 | }, time || 0);
179 | },
180 | stop : function(name) {
181 | this.sounds[name].stop();
182 | },
183 | fadeIn : function(name, time) {
184 | var self = this;
185 | setTimeout(function() {
186 | self.sounds[name].fade(0,1,1500);
187 | }, time || 0);
188 | },
189 | fadeOut : function(name, time) {
190 | var self = this;
191 | setTimeout(function() {
192 | self.sounds[name].fade(1,0,1500);
193 | }, time || 0);
194 | },
195 | toggleMuteAll : function(state) {
196 | for(var key in this.sounds) {
197 | this.sounds[key].mute(state);
198 | }
199 | }
200 | };
201 |
202 | function init() {
203 | var loadedMediaItems = 0,
204 | checkloaded = function() {
205 | ++loadedMediaItems;
206 | if(loadedMediaItems === 2) {
207 | mainContainer.classList.add('landing-layout--loaded');
208 | // Play lake sound.
209 | audio.loop('lake');
210 | audio.play('lake');
211 | // Init the bubbles canvas animation.
212 | bubbles.init();
213 | // Init/Bind Events
214 | initEvents();
215 | }
216 | };
217 |
218 | // Preload images..
219 | imagesLoaded(landingWrapper, { background: true }, checkloaded);
220 | // Preload sounds..
221 | audio.load(checkloaded);
222 | }
223 |
224 | function initEvents() {
225 | // Trigger the main animation.
226 | triggerCtrl.addEventListener('click', function() {
227 | toggleMenu();
228 | });
229 | // Mute sounds.
230 | soundCtrl.addEventListener('click', function() {
231 | if( !isAudioOn ) {
232 | audio.toggleMuteAll(false);
233 | soundCtrl.classList.remove('button--sound-off');
234 | }
235 | else {
236 | audio.toggleMuteAll(true);
237 | soundCtrl.classList.add('button--sound-off');
238 | }
239 | isAudioOn = !isAudioOn;
240 | });
241 | }
242 |
243 | function toggleMenu() {
244 | var isOpen = mainContainer.classList.contains('landing-layout--open');
245 | // Toggle class on the main container.
246 | mainContainer.classList.toggle('landing-layout--open');
247 |
248 | if( isOpen ) { // close it.
249 | // Stop the bubbles canvas animation.
250 | bubbles.stop();
251 | // Sounds..
252 | audio.fadeOut('underwater');
253 | audio.play('splash2', 700);
254 | audio.loop('lake');
255 | audio.fadeIn('lake', 700);
256 | }
257 | else { // open it.
258 | // Start the bubbles canvas animation.
259 | bubbles.start();
260 | // Sounds..
261 | audio.fadeOut('lake');
262 | audio.play('splash', 700);
263 | audio.loop('underwater');
264 | audio.play('underwater', 700);
265 | audio.fadeIn('underwater');
266 | }
267 | }
268 |
269 | init();
270 |
271 | })(window);
--------------------------------------------------------------------------------
/js/main_2.js:
--------------------------------------------------------------------------------
1 | /**
2 | * main.js
3 | * http://www.codrops.com
4 | *
5 | * Licensed under the MIT license.
6 | * http://www.opensource.org/licenses/mit-license.php
7 | *
8 | * Copyright 2016, Codrops
9 | * http://www.codrops.com
10 | */
11 | ;(function(window) {
12 |
13 | 'use strict';
14 |
15 | // some helper functions
16 | /**
17 | * from https://davidwalsh.name/javascript-debounce-function
18 | */
19 | function debounce(func, wait, immediate) {
20 | var timeout;
21 | return function() {
22 | var context = this, args = arguments;
23 | var later = function() {
24 | timeout = null;
25 | if (!immediate) func.apply(context, args);
26 | };
27 | var callNow = immediate && !timeout;
28 | clearTimeout(timeout);
29 | timeout = setTimeout(later, wait);
30 | if (callNow) func.apply(context, args);
31 | };
32 | };
33 | /**
34 | * from http://stackoverflow.com/a/6700
35 | */
36 | Object.size = function(obj) {
37 | var size = 0, key;
38 | for (key in obj) {
39 | if (obj.hasOwnProperty(key)) size++;
40 | }
41 | return size;
42 | };
43 |
44 | var mainContainer = document.querySelector('.landing-layout'),
45 | triggerCtrl = mainContainer.querySelector('.button--trigger'),
46 | landingWrapper = mainContainer.querySelector('.landing-wrap'),
47 | winsize = {width : window.innerWidth, height : window.innerHeight},
48 | soundCtrl = mainContainer.querySelector('button.button--sound'),
49 | isAudioOn = true,
50 |
51 | // from http://stackoverflow.com/q/31184533 - original work: http://www.kaiserapps.com/lab/#ub
52 | bubbles = {
53 | canvas : null,
54 | ctx : null,
55 | mousex : winsize.width - 30,
56 | mousey : winsize.height - 30,
57 | cntr : 0,
58 | circleArr : new Array(),
59 | requestId : undefined,
60 | init : function() {
61 | this.canvas = document.getElementById('bubbles');
62 | this.ctx = this.canvas.getContext('2d');
63 | this.canvas.width = winsize.width;
64 | this.canvas.height = winsize.height;
65 |
66 | // Window resize.
67 | var self = this;
68 | this.debounceResize = debounce(function() {
69 | winsize = {width : window.innerWidth, height : window.innerHeight};
70 | self.canvas.height = winsize.height;
71 | self.canvas.width = winsize.width;
72 | }, 10);
73 | window.addEventListener('resize', this.debounceResize);
74 | },
75 | loop : function() {
76 | this.requestId = requestAnimationFrame(bubbles.loop.bind(this));
77 | this.update();
78 | this.render();
79 | },
80 | update : function() {
81 | if( this.cntr++ % 1 == 0 ) {
82 | this.createCircle();
83 | }
84 |
85 | for(var circle in this.circleArr) {
86 | circle = this.circleArr[circle];
87 |
88 | var max = 2, min = -2;
89 | if( this.mousex <= winsize.width/2 - winsize.width*0.1 ) {
90 | min = -4;
91 | }
92 | else if( this.mousex >= winsize.width/2 + winsize.width*0.1 ) {
93 | max = 4;
94 | }
95 |
96 | circle.x += Math.floor(Math.random() * (max - min + 1)) + min;
97 | circle.y -= Math.random()*15;
98 | }
99 |
100 | while(this.circleArr.length > 2 && (this.circleArr[0].x + this.circleArr[0].s > winsize.width || this.circleArr[0].x + this.circleArr[0].s < 0 || this.circleArr[0].y + this.circleArr[0].s > winsize.height || this.circleArr[0].y + this.circleArr[0].s < 0) ){
101 | this.circleArr.shift();
102 | }
103 | },
104 | render : function() {
105 | // clear
106 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
107 | // draw the data
108 | for(var circle in this.circleArr) {
109 | var current = this.circleArr[circle];
110 | this.drawCircle(current.x, current.y, current.s);
111 | }
112 | },
113 | createCircle : function() {
114 | var tmp = this.circleArr[this.circleArr.length-1];
115 |
116 | this.circleArr[this.circleArr.length] = {
117 | x: this.mousex,
118 | y: this.mousey,
119 | s: Math.random()*winsize.height/60
120 | };
121 | },
122 | drawCircle : function(x, y, radius) {
123 | this.ctx.fillStyle = "#38706F";
124 | this.ctx.beginPath();
125 | this.ctx.arc(x,y,radius, 0, Math.PI*2, false);
126 | this.ctx.closePath();
127 | this.ctx.fill();
128 | },
129 | start : function() {
130 | if( !this.requestId ) {
131 | document.onmousemove = this.getMouseCoordinates.bind(this);
132 | this.loop();
133 | }
134 | },
135 | stop : function() {
136 | if( this.requestId ) {
137 | window.cancelAnimationFrame(this.requestId);
138 | this.requestId = undefined;
139 | document.onmousemove = null;
140 | // clear
141 | this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
142 | }
143 | },
144 | getMouseCoordinates : function(ev) {
145 | var ev = ev || window.event;
146 | this.mousex = ev.pageX;
147 | this.mousey = ev.pageY;
148 | }
149 | },
150 | audio = {
151 | sounds : {},
152 | sources : [{
153 | lake : 'sounds/Ocean_Waves-Mike_Koenig-980635527.mp3',
154 | splash : 'sounds/Water Splash-SoundBible.com-800223477.mp3',
155 | underwater : 'sounds/96742__robinhood76__01650-underwater-bubbles.mp3'
156 | }],
157 | load : function(callback) {
158 | this.totalFiles = Object.size(this.sources[0]);
159 |
160 | for(var key in this.sources[0]) {
161 | var sound = new Howl({ src: [this.sources[0][key]] }), self = this;
162 | sound.once('load', function(key) {
163 | return function() {
164 | self.sounds[key] = this;
165 | if( Object.size(self.sounds) === self.totalFiles ) {
166 | if( typeof callback === 'function' ) {
167 | callback();
168 | }
169 | }
170 | };
171 | }(key));
172 | }
173 | },
174 | loop : function(name) {
175 | this.sounds[name].loop(true);
176 | },
177 | volume : function(name, val) {
178 | this.sounds[name].volume(val);
179 | },
180 | play : function(name, time) {
181 | this.sounds[name].stop();
182 | var self = this;
183 | setTimeout(function() {
184 | self.sounds[name].play();
185 | }, time || 0);
186 | },
187 | stop : function(name) {
188 | this.sounds[name].stop();
189 | },
190 | fadeIn : function(name, time) {
191 | var self = this;
192 | setTimeout(function() {
193 | self.sounds[name].fade(0,1,1000);
194 | }, time || 0);
195 | },
196 | fadeOut : function(name, time) {
197 | var self = this;
198 | setTimeout(function() {
199 | self.sounds[name].fade(1,0,1000);
200 | }, time || 0);
201 | },
202 | toggleMuteAll : function(state) {
203 | for(var key in this.sounds) {
204 | this.sounds[key].mute(state);
205 | }
206 | }
207 | };
208 |
209 | function init() {
210 | var loadedMediaItems = 0,
211 | checkloaded = function() {
212 | ++loadedMediaItems;
213 | if(loadedMediaItems === 2) {
214 | mainContainer.classList.add('landing-layout--loaded');
215 | // Play lake sound.
216 | audio.loop('lake');
217 | audio.play('lake');
218 | // Init the bubbles canvas animation.
219 | bubbles.init();
220 | // Init/Bind Events
221 | initEvents();
222 | }
223 | };
224 |
225 | // Preload images..
226 | imagesLoaded(landingWrapper, { background: true }, checkloaded);
227 | // Preload sounds..
228 | audio.load(checkloaded);
229 | }
230 |
231 | function initEvents() {
232 | // Trigger the main animation.
233 | triggerCtrl.addEventListener('click', function() {
234 | toggleMenu();
235 | });
236 | // Mute sounds.
237 | soundCtrl.addEventListener('click', function() {
238 | if( !isAudioOn ) {
239 | audio.toggleMuteAll(false);
240 | soundCtrl.classList.remove('button--sound-off');
241 | }
242 | else {
243 | audio.toggleMuteAll(true);
244 | soundCtrl.classList.add('button--sound-off');
245 | }
246 | isAudioOn = !isAudioOn;
247 | });
248 | }
249 |
250 | function toggleMenu() {
251 | var isOpen = mainContainer.classList.contains('landing-layout--open');
252 | // Toggle class on the main container.
253 | mainContainer.classList.toggle('landing-layout--open');
254 |
255 | if( isOpen ) { // close it.
256 | // Stop the bubbles canvas animation.
257 | bubbles.stop();
258 | // Sounds..
259 | audio.fadeOut('underwater');
260 | audio.play('splash');
261 | audio.loop('lake');
262 | audio.fadeIn('lake');
263 | }
264 | else { // open it.
265 | // Start the bubbles canvas animation.
266 | bubbles.start();
267 | // Sounds..
268 | audio.fadeOut('lake');
269 | audio.volume('splash', 0.5);
270 | audio.play('splash');
271 | audio.loop('underwater');
272 | audio.play('underwater');
273 | audio.fadeIn('underwater');
274 | }
275 | }
276 |
277 | init();
278 |
279 | })(window);
--------------------------------------------------------------------------------
/img/icons/sw2.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
82 |
--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Above & Beneath: Featured Content Layout Effect | Demo 2 | Codrops
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
70 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
85 |
86 |
90 |
91 |
95 |
96 |
136 |
137 |
149 |
150 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Above & Beneath: Featured Content Layout Effect | Demo 1 | Codrops
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
70 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
85 |
86 |
90 |
91 |
95 |
96 |
136 |
137 |
149 |
150 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Above & Beneath: Featured Content Layout Effect | Demo 3 | Codrops
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |
20 |
21 |
70 |
71 |
72 |
73 |
74 |
77 |
78 |
79 |
85 |
86 |
90 |
91 |
95 |
96 |
136 |
137 |
149 |
150 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
--------------------------------------------------------------------------------
/img/icons/sw5.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
92 |
--------------------------------------------------------------------------------
/css/style2.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
10 | background: #0c4350;
11 | color: #011110;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | height: 100vh;
15 | }
16 |
17 | .js body {
18 | overflow: hidden;
19 | }
20 |
21 | a {
22 | outline: none;
23 | color: #011110;
24 | text-decoration: none;
25 | -webkit-transition: color 0.2s;
26 | transition: color 0.2s;
27 | }
28 |
29 | a:hover,
30 | a:focus {
31 | color: #f46377;
32 | outline: none;
33 | }
34 |
35 | .hidden {
36 | position: absolute;
37 | overflow: hidden;
38 | width: 0;
39 | height: 0;
40 | pointer-events: none;
41 | }
42 |
43 | /* Icons */
44 |
45 | .icon {
46 | display: block;
47 | width: 1.5em;
48 | height: 1.5em;
49 | margin: 0 auto;
50 | fill: currentColor;
51 | }
52 |
53 | .icon--hidden {
54 | display: none;
55 | }
56 |
57 | .landing-layout--open .button--trigger .icon--hidden {
58 | display: block;
59 | }
60 |
61 | .landing-layout--open .button--trigger .icon--shown {
62 | display: none;
63 | }
64 |
65 | .icon--arrow-up {
66 | -webkit-transform: rotate(90deg);
67 | transform: rotate(90deg);
68 | }
69 |
70 | .button {
71 | margin: 0;
72 | padding: 0;
73 | color: #f46377;
74 | border: none;
75 | background: none;
76 | width: 4em;
77 | height: 4em;
78 | background: #011110;
79 | }
80 |
81 | .button:hover {
82 | color: #fff;
83 | }
84 |
85 | .button:focus {
86 | outline: none;
87 | }
88 |
89 | .button--trigger {
90 | position: absolute;
91 | right: 0em;
92 | bottom: 0em;
93 | }
94 |
95 | .no-js .button--trigger {
96 | display: none;
97 | }
98 |
99 | .button--sound {
100 | position: absolute;
101 | right: 0em;
102 | top: 0em;
103 | }
104 |
105 | .button--sound-off .icon--shown {
106 | display: none;
107 | }
108 |
109 | .button--sound-off .icon--hidden {
110 | display: block;
111 | }
112 |
113 | .landing-layout {
114 | height: 100vh;
115 | overflow: hidden;
116 | }
117 |
118 | .landing {
119 | position: relative;
120 | width: 100vw;
121 | height: 100vh;
122 | background-repeat: no-repeat;
123 | background-size: cover;
124 | }
125 |
126 | .landing--above {
127 | background-position: 50% 100%;
128 | }
129 |
130 | .landing--beneath {
131 | background-position: 50% 0%;
132 | }
133 |
134 | .landing-header {
135 | position: absolute;
136 | top: 5em;
137 | bottom: 0;
138 | left: 0;
139 | display: -webkit-flex;
140 | display: -ms-flexbox;
141 | display: flex;
142 | -webkit-flex-direction: column;
143 | -ms-flex-direction: column;
144 | flex-direction: column;
145 | -webkit-align-items: center;
146 | -ms-flex-align: center;
147 | align-items: center;
148 | width: 100vw;
149 | padding: 1em;
150 | text-align: center;
151 | }
152 |
153 | .landing-header__title {
154 | font-family: 'Raleway', serif;
155 | font-size: 8em;
156 | font-weight: 900;
157 | line-height: 1;
158 | margin: 0.15em 0 0;
159 | letter-spacing: 10px;
160 | text-indent: 10px;
161 | text-transform: uppercase;
162 | pointer-events: none;
163 | color: #011110;
164 | }
165 |
166 | .landing-header__tagline {
167 | font-size: 0.95em;
168 | padding: 0.65em 1em;
169 | font-weight: 600;
170 | line-height: 1;
171 | text-transform: uppercase;
172 | letter-spacing: 3px;
173 | max-width: 500px;
174 | margin: 0 auto;
175 | color: #fff;
176 | text-indent: 3px;
177 | background: #f46377;
178 | font-family: "Crimson Text", serif;
179 | }
180 |
181 | .featured-content {
182 | position: absolute;
183 | width: 100%;
184 | height: 100%;
185 | top: 100vh;
186 | left: 0;
187 | }
188 |
189 | .js .featured-content {
190 | top: 0;
191 | pointer-events: none;
192 | }
193 |
194 | .featured-list {
195 | display: -webkit-flex;
196 | display: -ms-flexbox;
197 | display: flex;
198 | -webkit-flex-wrap: wrap;
199 | -ms-flex-wrap: wrap;
200 | flex-wrap: wrap;
201 | -webkit-justify-content: center;
202 | -ms-flex-pack: center;
203 | justify-content: center;
204 | -webkit-align-items: center;
205 | -ms-flex-align: center;
206 | align-items: center;
207 | -webkit-align-content: center;
208 | -ms-flex-line-pack: center;
209 | align-content: center;
210 | max-width: 50vw;
211 | min-width: 550px;
212 | height: 60vh;
213 | margin: 30vh auto 0;
214 | padding: 0;
215 | list-style: none;
216 | text-align: center;
217 | }
218 |
219 | .featured-list__item {
220 | width: 33.33%;
221 | padding: 10% 0 0;
222 | }
223 |
224 | .featured-list__link {
225 | display: block;
226 | position: relative;
227 | text-align: center;
228 | }
229 |
230 | .featured-list__img {
231 | width: 37.5%;
232 | max-width: 80px;
233 | min-width: 60px;
234 | display: block;
235 | margin: 0 auto;
236 | }
237 |
238 | .featured-list__title {
239 | font-weight: 500;
240 | display: inline-block;
241 | padding: 0 0.65em;
242 | font-size: 0.95em;
243 | line-height: 1.8;
244 | font-family: "Crimson Text", serif;
245 | text-transform: uppercase;
246 | letter-spacing: 3px;
247 | text-indent: 3px;
248 | border-top: 1px solid;
249 | border-bottom: 1px solid;
250 | }
251 |
252 | /* Codrops header */
253 |
254 | .codrops-header {
255 | padding: 0.185em 0.5em;
256 | width: calc(100% - 4em);
257 | display: -webkit-flex;
258 | display: -ms-flexbox;
259 | display: flex;
260 | -webkit-flex-direction: row;
261 | -ms-flex-direction: row;
262 | flex-direction: row;
263 | -webkit-align-items: center;
264 | -ms-flex-align: center;
265 | align-items: center;
266 | -webkit-flex-wrap: wrap;
267 | flex-wrap: wrap;
268 | position: absolute;
269 | top: 0;
270 | left: 0;
271 | }
272 |
273 | .codrops-header__title {
274 | font-size: 1em;
275 | font-weight: 500;
276 | margin: 0;
277 | padding: 0 0.75em;
278 | }
279 |
280 |
281 | /* Top Navigation Style */
282 |
283 | .codrops-links {
284 | position: relative;
285 | display: -webkit-flex;
286 | display: -ms-flexbox;
287 | display: flex;
288 | -webkit-justify-content: center;
289 | -ms-flex-pack: center;
290 | justify-content: center;
291 | text-align: center;
292 | white-space: nowrap;
293 | margin: 0.5em 0;
294 | }
295 |
296 | .codrops-links::after {
297 | position: absolute;
298 | top: 10%;
299 | left: 50%;
300 | width: 1px;
301 | height: 80%;
302 | background: currentColor;
303 | opacity: 0.2;
304 | content: '';
305 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
306 | transform: rotate3d(0, 0, 1, 22.5deg);
307 | }
308 |
309 | .codrops-icon {
310 | display: inline-block;
311 | margin: 0.25em;
312 | padding: 0.25em;
313 | }
314 |
315 | /* Demo links */
316 |
317 | .codrops-demos {
318 | margin: 0 0 0 auto;
319 | }
320 |
321 | .codrops-demos a {
322 | font-weight: 700;
323 | font-size: 0.65em;
324 | line-height: 1;
325 | display: inline-block;
326 | margin: 0 2em 0 0;
327 | text-transform: uppercase;
328 | letter-spacing: 2px;
329 | }
330 |
331 | .codrops-demos a.current-demo {
332 | opacity: 0.5;
333 | }
334 |
335 | /**********************************/
336 | /* All transitions and animations */
337 | /**********************************/
338 |
339 | .landing-wrap {
340 | -webkit-transition: -webkit-transform 1.2s;
341 | transition: transform 1.2s;
342 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
343 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
344 | }
345 |
346 | .landing-layout--open .landing-wrap {
347 | -webkit-transform: translate3d(0, -100vh, 0);
348 | transform: translate3d(0, -100vh, 0);
349 | }
350 |
351 | .landing-header__title {
352 | -webkit-transition: -webkit-transform 1s;
353 | transition: transform 1s;
354 | -webkit-transform-origin: 50% 0%;
355 | transform-origin: 50% 0%;
356 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
357 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
358 | }
359 |
360 | .landing-layout--open .landing-header__title {
361 | -webkit-transform: scale3d(0.6, 0.6, 1);
362 | transform: scale3d(0.6, 0.6, 1);
363 | }
364 |
365 | .landing-header__tagline {
366 | -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
367 | transition: opacity 0.5s, transform 0.5s;
368 | -webkit-transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
369 | transition-timing-function: cubic-bezier(0.2, 1, 0.3, 1);
370 | }
371 |
372 | .landing-layout--open .landing-header__tagline {
373 | opacity: 0;
374 | -webkit-transform: scale3d(0.8, 0.8, 1);
375 | transform: scale3d(0.8, 0.8, 1);
376 | }
377 |
378 | .js .featured-list__item {
379 | -webkit-transform: scale3d(0.8, 0.8, 1);
380 | transform: scale3d(0.8, 0.8, 1);
381 | opacity: 0;
382 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
383 | transition: opacity 0.3s, transform 0.3s;
384 | }
385 |
386 | .js .landing-layout--open .featured-list__item {
387 | pointer-events: auto;
388 | opacity: 1;
389 | -webkit-transform: scale3d(1, 1, 1);
390 | transform: scale3d(1, 1, 1);
391 | -webkit-transition: opacity 1.5s, -webkit-transform 0.8s;
392 | transition: opacity 1.5s, transform 0.8s;
393 | }
394 |
395 | .landing-layout--open .featured-list__item:nth-child(-n+3) {
396 | -webkit-transition-delay: 0.3s;
397 | transition-delay: 0.3s;
398 | }
399 |
400 | .landing-layout--open .featured-list__item:nth-child(n+4) {
401 | -webkit-transition-delay: 0.6s;
402 | transition-delay: 0.6s;
403 | }
404 |
405 | .codrops-header {
406 | -webkit-transition: opacity 0.5s 1.1s;
407 | transition: opacity 0.5s 1.1s;
408 | }
409 |
410 | .landing-layout--open .codrops-header {
411 | pointer-events: none;
412 | opacity: 0;
413 | -webkit-transition-delay: 0s;
414 | transition-delay: 0s;
415 | }
416 |
417 | .loader {
418 | position: fixed;
419 | width: 100vw;
420 | height: 100vh;
421 | background: #011110;
422 | top: 0;
423 | left: 0;
424 | pointer-events: none;
425 | display: -webkit-flex;
426 | display: -ms-flexbox;
427 | display: flex;
428 | -webkit-justify-content: center;
429 | -ms-flex-pack: center;
430 | justify-content: center;
431 | -webkit-align-items: center;
432 | -ms-flex-align: center;
433 | align-items: center;
434 | visibility: hidden;
435 | }
436 |
437 | .loader::after {
438 | position: absolute;
439 | content: 'Turn your \0009 \266A \0009 on';
440 | color: #f46377;
441 | top: 60%;
442 | width: 100%;
443 | left: 0;
444 | text-align: center;
445 | font-size: 1.5em;
446 | }
447 |
448 | .js .loader {
449 | visibility: visible;
450 | }
451 |
452 | .landing-layout--loaded .loader {
453 | opacity: 0;
454 | -webkit-transition: opacity 0.3s;
455 | transition: opacity 0.3s;
456 | }
457 |
458 | .loader__circle {
459 | fill: rgba(255,255,255,0.6);
460 | opacity: 0.1;
461 | -webkit-animation: moveUpDown 0.5s ease alternate infinite forwards;
462 | animation: moveUpDown 0.5s ease alternate infinite forwards;
463 | }
464 |
465 | .loader__circle:nth-child(2) {
466 | opacity: 0.8;
467 | -webkit-animation-delay: 0.1s;
468 | animation-delay: 0.1s;
469 | }
470 |
471 | .loader__circle:nth-child(3) {
472 | opacity: 0.3;
473 | -webkit-animation-delay: 0.4s;
474 | animation-delay: 0.4s;
475 | }
476 |
477 | @-webkit-keyframes moveUpDown {
478 | to {
479 | -webkit-transform: translate3d(0, -50px, 0);
480 | transform: translate3d(0, -50px, 0);
481 | opacity: 0.5;
482 | }
483 | }
484 |
485 | @keyframes moveUpDown {
486 | to {
487 | -webkit-transform: translate3d(0, -50px, 0);
488 | transform: translate3d(0, -50px, 0);
489 | opacity: 0.5;
490 | }
491 | }
492 |
493 | /* Media queries */
494 |
495 | @media screen and (max-width: 43.75em) {
496 | .codrops-demos {
497 | margin: 0 0 0 0.5em;
498 | width: 100%;
499 | }
500 | .codrops-demos::after {
501 | content: 'Tap anywhere to turn on sound';
502 | display: inline-block;
503 | margin: 1em 0 0 0;
504 | font-weight: bold;
505 | color: #f46377;
506 | }
507 | .landing-wrap {
508 | -webkit-transition-property: -webkit-transform, opacity;
509 | transition-property: transform, opacity;
510 | }
511 | .landing-layout--open .landing-wrap {
512 | opacity: 0.2;
513 | }
514 | .landing-header__title {
515 | font-size: 2.5em;
516 | padding-top: 1em;
517 | }
518 | .landing-layout--open .landing-header__title {
519 | -webkit-transform: translate3d(0,-2.5em,0) scale3d(0.6, 0.6, 1);
520 | transform: translate3d(0,-2.5em,0) scale3d(0.6, 0.6, 1);
521 | }
522 | .landing-header__tagline {
523 | font-size: 0.5em;
524 | }
525 | .featured-list {
526 | width: 100%;
527 | min-width: 0;
528 | max-width: none;
529 | margin-top: 13vh;
530 | }
531 | .featured-list__item {
532 | width: 50%;
533 | font-size: 0.85em;
534 | }
535 | .landing-layout--open .featured-list__item:nth-child(-n+2) {
536 | -webkit-transition-delay: 0.3s;
537 | transition-delay: 0.3s;
538 | }
539 | .landing-layout--open .featured-list__item:nth-child(3),
540 | .landing-layout--open .featured-list__item:nth-child(4) {
541 | -webkit-transition-delay: 0.6s;
542 | transition-delay: 0.6s;
543 | }
544 | .landing-layout--open .featured-list__item:nth-child(n+5) {
545 | -webkit-transition-delay: 0.9s;
546 | transition-delay: 0.9s;
547 | }
548 | .featured-list__img {
549 | width: 40px;
550 | max-width: none;
551 | min-width: 0;
552 | }
553 | .featured-list__title {
554 | font-size: 0.85em;
555 | }
556 | .button {
557 | font-size: 0.85em;
558 | }
559 | .codrops-header {
560 | font-size: 0.75em;
561 | }
562 | .loader::after {
563 | font-size: 1em;
564 | }
565 | }
566 |
--------------------------------------------------------------------------------
/css/style1.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
10 | background: #040c1d;
11 | color: #fff;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | height: 100vh;
15 | }
16 |
17 | .js body {
18 | overflow: hidden;
19 | }
20 |
21 | a {
22 | outline: none;
23 | color: #fff;
24 | text-decoration: none;
25 | -webkit-transition: color 0.2s;
26 | transition: color 0.2s;
27 | }
28 |
29 | a:hover,
30 | a:focus {
31 | color: #84ff84;
32 | outline: none;
33 | }
34 |
35 | .hidden {
36 | position: absolute;
37 | overflow: hidden;
38 | width: 0;
39 | height: 0;
40 | pointer-events: none;
41 | }
42 |
43 | /* Icons */
44 |
45 | .icon {
46 | display: block;
47 | width: 1.5em;
48 | height: 1.5em;
49 | margin: 0 auto;
50 | fill: currentColor;
51 | }
52 |
53 | .icon--hidden {
54 | display: none;
55 | }
56 |
57 | .landing-layout--open .button--trigger .icon--hidden {
58 | display: block;
59 | }
60 |
61 | .landing-layout--open .button--trigger .icon--shown {
62 | display: none;
63 | }
64 |
65 | .icon--arrow-up {
66 | -webkit-transform: rotate(90deg);
67 | transform: rotate(90deg);
68 | }
69 |
70 | .button {
71 | margin: 0;
72 | padding: 0;
73 | color: #fff;
74 | border: none;
75 | background: none;
76 | width: 4em;
77 | height: 4em;
78 | }
79 |
80 | .button:hover {
81 | color: #84ff84;
82 | }
83 |
84 | .button:focus {
85 | outline: none;
86 | }
87 |
88 | .button--trigger {
89 | position: absolute;
90 | right: 0em;
91 | bottom: 0em;
92 | }
93 |
94 | .no-js .button--trigger {
95 | display: none;
96 | }
97 |
98 | .button--sound {
99 | position: absolute;
100 | right: 0em;
101 | top: 0em;
102 | }
103 |
104 | .button--sound-off .icon--shown {
105 | display: none;
106 | }
107 |
108 | .button--sound-off .icon--hidden {
109 | display: block;
110 | }
111 |
112 | .landing-layout {
113 | height: 100vh;
114 | overflow: hidden;
115 | }
116 |
117 | .landing {
118 | position: relative;
119 | width: 100vw;
120 | height: 100vh;
121 | background-repeat: no-repeat;
122 | background-size: cover;
123 | }
124 |
125 | .landing--above {
126 | background-position: 50% 100%;
127 | }
128 |
129 | .landing--beneath {
130 | background-position: 50% 0%;
131 | }
132 |
133 | .landing-header {
134 | position: absolute;
135 | top: 0;
136 | left: 0;
137 | display: -webkit-flex;
138 | display: -ms-flexbox;
139 | display: flex;
140 | -webkit-flex-direction: column;
141 | -ms-flex-direction: column;
142 | flex-direction: column;
143 | -webkit-justify-content: center;
144 | -ms-flex-pack: center;
145 | justify-content: center;
146 | -webkit-align-items: center;
147 | -ms-flex-align: center;
148 | align-items: center;
149 | width: 100vw;
150 | height: 100vh;
151 | padding: 1em;
152 | text-align: center;
153 | }
154 |
155 | .landing-header__title {
156 | font-family: 'Vidaloka', serif;
157 | font-size: 8em;
158 | font-weight: 400;
159 | line-height: 1;
160 | margin: 0.15em 0 0;
161 | letter-spacing: -0.05em;
162 | pointer-events: none;
163 | }
164 |
165 | .landing-header__tagline {
166 | font-size: 1.5em;
167 | padding: 0 0.5em;
168 | font-weight: 500;
169 | line-height: 1.75;
170 | max-width: 500px;
171 | margin: 0 auto;
172 | color: #84ff84;
173 | background: #090d31;
174 | }
175 |
176 | .landing-header__title span {
177 | position: relative;
178 | display: inline-block;
179 | }
180 |
181 | .featured-content {
182 | position: absolute;
183 | width: 100%;
184 | height: 100%;
185 | top: 100vh;
186 | left: 0;
187 | }
188 |
189 | .js .featured-content {
190 | top: 0;
191 | pointer-events: none;
192 | }
193 |
194 | .featured-list {
195 | display: -webkit-flex;
196 | display: -ms-flexbox;
197 | display: flex;
198 | -webkit-flex-wrap: wrap;
199 | -ms-flex-wrap: wrap;
200 | flex-wrap: wrap;
201 | -webkit-justify-content: center;
202 | -ms-flex-pack: center;
203 | justify-content: center;
204 | -webkit-align-items: center;
205 | -ms-flex-align: center;
206 | align-items: center;
207 | -webkit-align-content: center;
208 | -ms-flex-line-pack: center;
209 | align-content: center;
210 | max-width: 50vw;
211 | min-width: 550px;
212 | height: 60vh;
213 | margin: 30vh auto 0;
214 | padding: 0;
215 | list-style: none;
216 | text-align: center;
217 | }
218 |
219 | .featured-list__item {
220 | width: 33.33%;
221 | padding: 10% 0 0;
222 | }
223 |
224 | .featured-list__link {
225 | display: block;
226 | position: relative;
227 | text-align: center;
228 | }
229 |
230 | .featured-list__img {
231 | width: 37.5%;
232 | max-width: 80px;
233 | min-width: 60px;
234 | display: block;
235 | margin: 0 auto;
236 | }
237 |
238 | .featured-list__title {
239 | font-weight: 500;
240 | display: inline-block;
241 | padding: 0 0.5em;
242 | line-height: 1.5;
243 | }
244 |
245 | /* Codrops header */
246 |
247 | .codrops-header {
248 | padding: 0.185em 0.5em;
249 | width: calc(100% - 4em);
250 | display: -webkit-flex;
251 | display: -ms-flexbox;
252 | display: flex;
253 | -webkit-flex-direction: row;
254 | -ms-flex-direction: row;
255 | flex-direction: row;
256 | -webkit-align-items: center;
257 | -ms-flex-align: center;
258 | align-items: center;
259 | -webkit-flex-wrap: wrap;
260 | flex-wrap: wrap;
261 | position: absolute;
262 | top: 0;
263 | left: 0;
264 | }
265 |
266 | .codrops-header__title {
267 | font-size: 1em;
268 | font-weight: 500;
269 | margin: 0;
270 | padding: 0 0.75em;
271 | }
272 |
273 |
274 | /* Top Navigation Style */
275 |
276 | .codrops-links {
277 | position: relative;
278 | display: -webkit-flex;
279 | display: -ms-flexbox;
280 | display: flex;
281 | -webkit-justify-content: center;
282 | -ms-flex-pack: center;
283 | justify-content: center;
284 | text-align: center;
285 | white-space: nowrap;
286 | margin: 0.5em 0;
287 | }
288 |
289 | .codrops-links::after {
290 | position: absolute;
291 | top: 10%;
292 | left: 50%;
293 | width: 1px;
294 | height: 80%;
295 | background: currentColor;
296 | opacity: 0.2;
297 | content: '';
298 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
299 | transform: rotate3d(0, 0, 1, 22.5deg);
300 | }
301 |
302 | .codrops-icon {
303 | display: inline-block;
304 | margin: 0.25em;
305 | padding: 0.25em;
306 | }
307 |
308 | /* Demo links */
309 |
310 | .codrops-demos {
311 | margin: 0 0 0 auto;
312 | }
313 |
314 | .codrops-demos a {
315 | font-weight: 700;
316 | font-size: 0.65em;
317 | line-height: 1;
318 | display: inline-block;
319 | margin: 0 2em 0 0;
320 | text-transform: uppercase;
321 | letter-spacing: 2px;
322 | }
323 |
324 | .codrops-demos a.current-demo {
325 | opacity: 0.5;
326 | }
327 |
328 |
329 | /**********************************/
330 | /* All transitions and animations */
331 | /**********************************/
332 |
333 | .landing-wrap {
334 | -webkit-transition: -webkit-transform 1.6s;
335 | transition: transform 1.6s;
336 | -webkit-transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
337 | transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
338 | }
339 |
340 | .landing-layout--open .landing-wrap {
341 | -webkit-transform: translate3d(0, -100vh, 0);
342 | transform: translate3d(0, -100vh, 0);
343 | }
344 |
345 | .landing--above {
346 | -webkit-transform-origin: 50% 100%;
347 | transform-origin: 50% 100%;
348 | -webkit-transition: -webkit-transform 1.6s, opacity 1.6s;
349 | transition: transform 1.6s, opacity 1.6s;
350 | -webkit-transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
351 | transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
352 | }
353 |
354 | .landing-layout--open .landing--above {
355 | opacity: 0;
356 | -webkit-transform: scale3d(1.2, 1.2, 1);
357 | transform: scale3d(1.2, 1.2, 1);
358 | }
359 |
360 | .landing-header__title {
361 | -webkit-transition: -webkit-transform 1.5s;
362 | transition: transform 1.5s;
363 | }
364 |
365 | .landing-layout--open .landing-header__title {
366 | -webkit-transition: -webkit-transform 2s 0.8s;
367 | transition: transform 2s 0.8s;
368 | -webkit-transform: translate3d(0, -30vh, 0);
369 | transform: translate3d(0, -30vh, 0);
370 | }
371 |
372 | .landing-header__tagline {
373 | -webkit-transition: opacity 0.5s 1.5s;
374 | transition: opacity 0.5s 1.5s;
375 | }
376 |
377 | .landing-layout--open .landing-header__tagline {
378 | opacity: 0;
379 | -webkit-transition-delay: 0s;
380 | transition-delay: 0s;
381 | }
382 |
383 | .landing-header__title span {
384 | color: #fff;
385 | -webkit-transition: color 1.5s;
386 | transition: color 1.5s;
387 | -webkit-transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
388 | transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
389 | -webkit-animation-name: floatAround-1;
390 | -webkit-animation-duration: 8s;
391 | -webkit-animation-timing-function: ease-out;
392 | -webkit-animation-iteration-count: infinite;
393 | -webkit-animation-fill-mode: forwards;
394 | -webkit-animation-play-state: paused;
395 | animation-name: floatAround-1;
396 | animation-duration: 8s;
397 | animation-timing-function: ease-out;
398 | animation-iteration-count: infinite;
399 | animation-fill-mode: forwards;
400 | animation-play-state: paused;
401 | }
402 |
403 | .landing-header__title span:nth-child(even) {
404 | -webkit-animation-name: floatAround-2;
405 | -webkit-animation-duration: 10s;
406 | animation-name: floatAround-2;
407 | animation-duration: 10s;
408 | }
409 |
410 | .landing-layout--open .landing-header__title span,
411 | .landing-layout--open .landing-header__title span:nth-child(even) {
412 | -webkit-transition: color 0.8s 0.4s;
413 | transition: color 0.8s 0.4s;
414 | color: #84ff84;
415 | -webkit-animation-play-state: running;
416 | animation-play-state: running;
417 | }
418 |
419 | @-webkit-keyframes floatAround-1 {
420 | 0%, 100% {
421 | -webkit-transform: translate3d(0, 0, 0);
422 | transform: translate3d(0, 0, 0);
423 | }
424 | 50% {
425 | -webkit-transform: translate3d(0, 0.1em, 0) rotate3d(0, 0, 1, -1deg);
426 | transform: translate3d(0, 0.1em, 0) rotate3d(0, 0, 1, -1deg);
427 | -webkit-animation-timing-function: ease-in;
428 | animation-timing-function: ease-in;
429 | }
430 | }
431 |
432 | @keyframes floatAround-1 {
433 | 0%, 100% {
434 | -webkit-transform: translate3d(0, 0, 0);
435 | transform: translate3d(0, 0, 0);
436 | }
437 | 50% {
438 | -webkit-transform: translate3d(0, 0.1em, 0);
439 | transform: translate3d(0, 0.1em, 0);
440 | -webkit-animation-timing-function: ease-in;
441 | animation-timing-function: ease-in;
442 | }
443 | }
444 |
445 | @-webkit-keyframes floatAround-2 {
446 | 0%, 100% {
447 | -webkit-transform: translate3d(0, 0, 0);
448 | transform: translate3d(0, 0, 0);
449 | }
450 | 50% {
451 | -webkit-transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
452 | transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
453 | -webkit-animation-timing-function: ease-in;
454 | animation-timing-function: ease-in;
455 | }
456 | }
457 |
458 | @keyframes floatAround-2 {
459 | 0%, 100% {
460 | -webkit-transform: translate3d(0, 0, 0);
461 | transform: translate3d(0, 0, 0);
462 | }
463 | 50% {
464 | -webkit-transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
465 | transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
466 | -webkit-animation-timing-function: ease-in;
467 | animation-timing-function: ease-in;
468 | }
469 | }
470 |
471 | .js .featured-list__item {
472 | opacity: 0;
473 | -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 0.8, 1);
474 | transform: translate3d(0, 10px, 0) scale3d(0.8, 0.8, 1);
475 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
476 | transition: opacity 0.3s, transform 0.3s;
477 | }
478 |
479 | .landing-layout--open .featured-list__item {
480 | pointer-events: auto;
481 | opacity: 1;
482 | -webkit-transform: scale3d(1, 1, 1);
483 | transform: scale3d(1, 1, 1);
484 | -webkit-transition: opacity 1.5s, -webkit-transform 0.8s;
485 | transition: opacity 1.5s, transform 0.8s;
486 | -webkit-transition-delay: 1.6s;
487 | transition-delay: 1.6s;
488 | }
489 |
490 | .landing-layout--open .featured-list__item:nth-child(2) {
491 | -webkit-transition-delay: 1.65s;
492 | transition-delay: 1.65s;
493 | }
494 |
495 | .landing-layout--open .featured-list__item:nth-child(3) {
496 | -webkit-transition-delay: 1.7s;
497 | transition-delay: 1.7s;
498 | }
499 |
500 | .landing-layout--open .featured-list__item:nth-child(4) {
501 | -webkit-transition-delay: 1.75s;
502 | transition-delay: 1.75s;
503 | }
504 |
505 | .landing-layout--open .featured-list__item:nth-child(5) {
506 | -webkit-transition-delay: 1.8s;
507 | transition-delay: 1.8s;
508 | }
509 |
510 | .landing-layout--open .featured-list__item:nth-child(6) {
511 | -webkit-transition-delay: 1.85s;
512 | transition-delay: 1.85s;
513 | }
514 |
515 | .codrops-header {
516 | -webkit-transition: opacity 0.5s 1.5s;
517 | transition: opacity 0.5s 1.5s;
518 | }
519 |
520 | .landing-layout--open .codrops-header {
521 | pointer-events: none;
522 | opacity: 0;
523 | -webkit-transition-delay: 0s;
524 | transition-delay: 0s;
525 | }
526 |
527 | .loader {
528 | position: fixed;
529 | width: 100vw;
530 | height: 100vh;
531 | background: #090d31;
532 | top: 0;
533 | left: 0;
534 | pointer-events: none;
535 | display: -webkit-flex;
536 | display: -ms-flexbox;
537 | display: flex;
538 | -webkit-justify-content: center;
539 | -ms-flex-pack: center;
540 | justify-content: center;
541 | -webkit-align-items: center;
542 | -ms-flex-align: center;
543 | align-items: center;
544 | visibility: hidden;
545 | }
546 |
547 | .loader::after {
548 | position: absolute;
549 | content: 'Turn your \0009 \266A \0009 on';
550 | color: #3e4588;
551 | top: 60%;
552 | width: 100%;
553 | left: 0;
554 | text-align: center;
555 | font-size: 1.5em;
556 | }
557 |
558 | .js .loader {
559 | visibility: visible;
560 | }
561 |
562 | .landing-layout--loaded .loader {
563 | opacity: 0;
564 | -webkit-transition: opacity 0.3s;
565 | transition: opacity 0.3s;
566 | }
567 |
568 | .loader__circle {
569 | fill: #4c5abb;
570 | opacity: 0.1;
571 | -webkit-animation: moveUpDown 0.5s ease alternate infinite forwards;
572 | animation: moveUpDown 0.5s ease alternate infinite forwards;
573 | }
574 |
575 | .loader__circle:nth-child(2) {
576 | opacity: 0.8;
577 | -webkit-animation-delay: 0.1s;
578 | animation-delay: 0.1s;
579 | }
580 |
581 | .loader__circle:nth-child(3) {
582 | opacity: 0.3;
583 | -webkit-animation-delay: 0.4s;
584 | animation-delay: 0.4s;
585 | }
586 |
587 | @-webkit-keyframes moveUpDown {
588 | to {
589 | -webkit-transform: translate3d(0, -50px, 0);
590 | transform: translate3d(0, -50px, 0);
591 | opacity: 0.5;
592 | }
593 | }
594 |
595 | @keyframes moveUpDown {
596 | to {
597 | -webkit-transform: translate3d(0, -50px, 0);
598 | transform: translate3d(0, -50px, 0);
599 | opacity: 0.5;
600 | }
601 | }
602 |
603 | /* Media queries */
604 |
605 | @media screen and (max-width: 43.75em) {
606 | .codrops-demos {
607 | margin: 0 0 0 0.5em;
608 | width: 100%;
609 | }
610 | .codrops-demos::after {
611 | content: 'Tap anywhere to turn on sound';
612 | display: inline-block;
613 | margin: 1em 0 0 0;
614 | font-weight: bold;
615 | color: #84ff84;
616 | }
617 | .landing-header__title {
618 | font-size: 2.5em;
619 | }
620 | .landing-layout--open .landing-header__title {
621 | -webkit-transform: translate3d(0, -40vh, 0);
622 | transform: translate3d(0, -40vh, 0);
623 | }
624 | .landing-header__tagline {
625 | font-size: 0.85em;
626 | }
627 | .featured-list {
628 | width: 80%;
629 | min-width: 0;
630 | max-width: none;
631 | margin-top: 17.5vh;
632 | }
633 | .featured-list__item {
634 | width: 50%;
635 | }
636 | .featured-list__img {
637 | width: 40px;
638 | max-width: none;
639 | min-width: 0;
640 | }
641 | .featured-list__title {
642 | font-size: 0.85em;
643 | }
644 | .button {
645 | font-size: 0.85em;
646 | }
647 | .codrops-header {
648 | font-size: 0.75em;
649 | }
650 | .codrops-header__title {
651 | padding: 0;
652 | }
653 | .loader::after {
654 | font-size: 1em;
655 | }
656 | }
657 |
--------------------------------------------------------------------------------
/css/style3.css:
--------------------------------------------------------------------------------
1 | *,
2 | *::after,
3 | *::before {
4 | -webkit-box-sizing: border-box;
5 | box-sizing: border-box;
6 | }
7 |
8 | body {
9 | font-family: 'Avenir Next', Avenir, 'Helvetica Neue', Helvetica, Arial, sans-serif;
10 | background: #fff;
11 | color: #fff;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | height: 100vh;
15 | }
16 |
17 | .js body {
18 | overflow: hidden;
19 | }
20 |
21 | a {
22 | outline: none;
23 | color: #fff;
24 | text-decoration: none;
25 | -webkit-transition: color 0.2s;
26 | transition: color 0.2s;
27 | }
28 |
29 | a:hover,
30 | a:focus {
31 | color: #fffe8d;
32 | outline: none;
33 | }
34 |
35 | .hidden {
36 | position: absolute;
37 | overflow: hidden;
38 | width: 0;
39 | height: 0;
40 | pointer-events: none;
41 | }
42 |
43 | /* Icons */
44 |
45 | .icon {
46 | display: block;
47 | width: 1.5em;
48 | height: 1.5em;
49 | margin: 0 auto;
50 | fill: currentColor;
51 | }
52 |
53 | .icon--hidden {
54 | display: none;
55 | }
56 |
57 | .landing-layout--open .button--trigger .icon--hidden {
58 | display: block;
59 | }
60 |
61 | .landing-layout--open .button--trigger .icon--shown {
62 | display: none;
63 | }
64 |
65 | .icon--arrow-up {
66 | -webkit-transform: rotate(90deg);
67 | transform: rotate(90deg);
68 | }
69 |
70 | .button {
71 | margin: 0;
72 | padding: 0;
73 | color: #fff;
74 | border: none;
75 | background: none;
76 | width: 4em;
77 | height: 4em;
78 | }
79 |
80 | .button:hover {
81 | color: #fffe8d;
82 | }
83 |
84 | .button:focus {
85 | outline: none;
86 | }
87 |
88 | .button--trigger {
89 | position: absolute;
90 | right: 0em;
91 | bottom: 0em;
92 | }
93 |
94 | .no-js .button--trigger {
95 | display: none;
96 | }
97 |
98 | .button--sound {
99 | position: absolute;
100 | right: 0em;
101 | top: 0em;
102 | }
103 |
104 | .button--sound-off .icon--shown {
105 | display: none;
106 | }
107 |
108 | .button--sound-off .icon--hidden {
109 | display: block;
110 | }
111 |
112 | .landing-layout {
113 | height: 100vh;
114 | overflow: hidden;
115 | }
116 |
117 | .landing-wrap {
118 | position: relative;
119 | z-index: -1;
120 | }
121 |
122 | .landing {
123 | position: relative;
124 | width: 100vw;
125 | height: 100vh;
126 | background-repeat: no-repeat;
127 | background-size: cover;
128 | }
129 |
130 | .landing--above {
131 | z-index: 2;
132 | background-position: 50% 100%;
133 | }
134 |
135 | .landing--beneath {
136 | z-index: 1;
137 | position: absolute;
138 | top: 0;
139 | left: 0;
140 | background-position: 50% 0%;
141 | }
142 |
143 | .landing-header {
144 | position: absolute;
145 | top: 0;
146 | left: 0;
147 | display: -webkit-flex;
148 | display: -ms-flexbox;
149 | display: flex;
150 | -webkit-flex-direction: column;
151 | -ms-flex-direction: column;
152 | flex-direction: column;
153 | -webkit-justify-content: center;
154 | -ms-flex-pack: center;
155 | justify-content: center;
156 | -webkit-align-items: center;
157 | -ms-flex-align: center;
158 | align-items: center;
159 | width: 100vw;
160 | height: 100vh;
161 | padding: 1em;
162 | text-align: center;
163 | }
164 |
165 | .landing-header__title {
166 | font-family: 'Kaushan Script', serif;
167 | font-size: 8em;
168 | font-weight: 400;
169 | line-height: 1;
170 | margin: 0.15em 0 0;
171 | letter-spacing: -0.05em;
172 | pointer-events: none;
173 | width: 100%;
174 | }
175 |
176 | .landing-header__tagline {
177 | font-size: 1em;
178 | padding: 0 1em;
179 | font-weight: 700;
180 | line-height: 2;
181 | max-width: 500px;
182 | margin: 1em auto 0;
183 | color: #58616a;
184 | background: #fffe8d;
185 | text-transform: uppercase;
186 | letter-spacing: 2px;
187 | }
188 |
189 | .landing-header__title span {
190 | position: relative;
191 | display: inline-block;
192 | }
193 |
194 | .featured-content {
195 | position: absolute;
196 | width: 100%;
197 | height: 100%;
198 | top: 100vh;
199 | left: 0;
200 | }
201 |
202 | .js .featured-content {
203 | top: 0;
204 | pointer-events: none;
205 | }
206 |
207 | .featured-list {
208 | display: -webkit-flex;
209 | display: -ms-flexbox;
210 | display: flex;
211 | -webkit-flex-wrap: wrap;
212 | -ms-flex-wrap: wrap;
213 | flex-wrap: wrap;
214 | -webkit-justify-content: center;
215 | -ms-flex-pack: center;
216 | justify-content: center;
217 | -webkit-align-items: center;
218 | -ms-flex-align: center;
219 | align-items: center;
220 | -webkit-align-content: center;
221 | -ms-flex-line-pack: center;
222 | align-content: center;
223 | max-width: 50vw;
224 | min-width: 550px;
225 | height: 60vh;
226 | margin: 30vh auto 0;
227 | padding: 0;
228 | list-style: none;
229 | text-align: center;
230 | }
231 |
232 | .featured-list__item {
233 | width: 33.33%;
234 | padding: 10% 0 0;
235 | }
236 |
237 | .featured-list__link {
238 | display: block;
239 | position: relative;
240 | text-align: center;
241 | }
242 |
243 | .featured-list__img {
244 | width: 37.5%;
245 | max-width: 80px;
246 | min-width: 60px;
247 | display: block;
248 | margin: 0 auto;
249 | }
250 |
251 | .featured-list__title {
252 | font-weight: 500;
253 | display: inline-block;
254 | padding: 0 0.5em;
255 | line-height: 1.5;
256 | color: #344160;
257 | background: #fffe8d;
258 | -webkit-transition: color 0.3s, background 0.3s;
259 | transition: color 0.3s, background 0.3s;
260 | }
261 |
262 | .featured-list__link:hover .featured-list__title,
263 | .featured-list__link:focus .featured-list__title {
264 | color: #fffe8d;
265 | background: #344160;
266 | }
267 |
268 | /* Codrops header */
269 |
270 | .codrops-header {
271 | padding: 0.185em 0.5em;
272 | width: calc(100% - 4em);
273 | display: -webkit-flex;
274 | display: -ms-flexbox;
275 | display: flex;
276 | -webkit-flex-direction: row;
277 | -ms-flex-direction: row;
278 | flex-direction: row;
279 | -webkit-align-items: center;
280 | -ms-flex-align: center;
281 | align-items: center;
282 | -webkit-flex-wrap: wrap;
283 | flex-wrap: wrap;
284 | position: absolute;
285 | top: 0;
286 | left: 0;
287 | }
288 |
289 | .codrops-header__title {
290 | font-size: 1em;
291 | font-weight: 500;
292 | margin: 0;
293 | padding: 0 0.75em;
294 | }
295 |
296 |
297 | /* Top Navigation Style */
298 |
299 | .codrops-links {
300 | position: relative;
301 | display: -webkit-flex;
302 | display: -ms-flexbox;
303 | display: flex;
304 | -webkit-justify-content: center;
305 | -ms-flex-pack: center;
306 | justify-content: center;
307 | text-align: center;
308 | white-space: nowrap;
309 | margin: 0.5em 0;
310 | }
311 |
312 | .codrops-links::after {
313 | position: absolute;
314 | top: 10%;
315 | left: 50%;
316 | width: 1px;
317 | height: 80%;
318 | background: currentColor;
319 | opacity: 0.2;
320 | content: '';
321 | -webkit-transform: rotate3d(0, 0, 1, 22.5deg);
322 | transform: rotate3d(0, 0, 1, 22.5deg);
323 | }
324 |
325 | .codrops-icon {
326 | display: inline-block;
327 | margin: 0.25em;
328 | padding: 0.25em;
329 | }
330 |
331 | /* Demo links */
332 |
333 | .codrops-demos {
334 | margin: 0 0 0 auto;
335 | }
336 |
337 | .codrops-demos a {
338 | font-weight: 700;
339 | font-size: 0.65em;
340 | line-height: 1;
341 | display: inline-block;
342 | margin: 0 2em 0 0;
343 | text-transform: uppercase;
344 | letter-spacing: 2px;
345 | }
346 |
347 | .codrops-demos a.current-demo {
348 | opacity: 0.5;
349 | }
350 |
351 |
352 | /**********************************/
353 | /* All transitions and animations */
354 | /**********************************/
355 |
356 | .landing--above {
357 | -webkit-transform-origin: 50% 80%;
358 | transform-origin: 50% 80%;
359 | -webkit-transition: -webkit-transform 1s 0.6s, opacity 1s 0.6s;
360 | transition: transform 1s 0.6s, opacity 1s 0.6s;
361 | -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
362 | transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
363 | }
364 |
365 | .landing-layout--open .landing--above {
366 | opacity: 0;
367 | -webkit-transform: scale3d(2.5, 2.5, 1);
368 | transform: scale3d(2.5, 2.5, 1);
369 | -webkit-transition: -webkit-transform 0.8s, opacity 0.8s;
370 | transition: transform 0.8s, opacity 0.8s;
371 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
372 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
373 | }
374 |
375 | .landing--beneath {
376 | -webkit-transform-origin: 50% 10%;
377 | transform-origin: 50% 10%;
378 | opacity: 0;
379 | -webkit-transform: scale3d(4, 4, 1);
380 | transform: scale3d(4, 4, 1);
381 | -webkit-transition: -webkit-transform 0.8s, opacity 0.8s 0.1s;
382 | transition: transform 0.8s, opacity 0.8s 0.1s;
383 | -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
384 | transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
385 | }
386 |
387 | .landing-layout--open .landing--beneath {
388 | opacity: 1;
389 | -webkit-transform: scale3d(1, 1, 1);
390 | transform: scale3d(1, 1, 1);
391 | -webkit-transition: -webkit-transform 1s 0.6s, opacity 1s 0.6s;
392 | transition: transform 1s 0.6s, opacity 1s 0.6s;
393 | -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
394 | transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
395 | }
396 |
397 | .landing-header__title {
398 | -webkit-transition: -webkit-transform 1s;
399 | transition: transform 1s;
400 | }
401 |
402 | .landing-layout--open .landing-header__title {
403 | -webkit-transition: -webkit-transform 2s 0.8s;
404 | transition: transform 2s 0.8s;
405 | -webkit-transform: translate3d(0, -30vh, 0);
406 | transform: translate3d(0, -30vh, 0);
407 | }
408 |
409 | .landing-header__tagline {
410 | -webkit-transition: opacity 0.5s 1s;
411 | transition: opacity 0.5s 1s;
412 | }
413 |
414 | .landing-layout--open .landing-header__tagline {
415 | opacity: 0;
416 | -webkit-transition-delay: 0s;
417 | transition-delay: 0s;
418 | }
419 |
420 | .landing-header__title span {
421 | color: #344160;
422 | -webkit-transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
423 | transition-timing-function: cubic-bezier(1, 0.005, 0.33, 1);
424 | -webkit-animation-name: floatAround-1;
425 | -webkit-animation-duration: 8s;
426 | -webkit-animation-timing-function: ease-out;
427 | -webkit-animation-iteration-count: infinite;
428 | -webkit-animation-fill-mode: forwards;
429 | -webkit-animation-play-state: paused;
430 | animation-name: floatAround-1;
431 | animation-duration: 8s;
432 | animation-timing-function: ease-out;
433 | animation-iteration-count: infinite;
434 | animation-fill-mode: forwards;
435 | animation-play-state: paused;
436 | }
437 |
438 | .landing-header__title span:nth-child(even) {
439 | -webkit-animation-name: floatAround-2;
440 | -webkit-animation-duration: 10s;
441 | animation-name: floatAround-2;
442 | animation-duration: 10s;
443 | }
444 |
445 | .landing-layout--open .landing-header__title span,
446 | .landing-layout--open .landing-header__title span:nth-child(even) {
447 | -webkit-animation-play-state: running;
448 | animation-play-state: running;
449 | }
450 |
451 | @-webkit-keyframes floatAround-1 {
452 | 0%, 100% {
453 | -webkit-transform: translate3d(0, 0, 0);
454 | transform: translate3d(0, 0, 0);
455 | }
456 | 50% {
457 | -webkit-transform: translate3d(0, 0.1em, 0) rotate3d(0, 0, 1, -1deg);
458 | transform: translate3d(0, 0.1em, 0) rotate3d(0, 0, 1, -1deg);
459 | -webkit-animation-timing-function: ease-in;
460 | animation-timing-function: ease-in;
461 | }
462 | }
463 |
464 | @keyframes floatAround-1 {
465 | 0%, 100% {
466 | -webkit-transform: translate3d(0, 0, 0);
467 | transform: translate3d(0, 0, 0);
468 | }
469 | 50% {
470 | -webkit-transform: translate3d(0, 0.1em, 0);
471 | transform: translate3d(0, 0.1em, 0);
472 | -webkit-animation-timing-function: ease-in;
473 | animation-timing-function: ease-in;
474 | }
475 | }
476 |
477 | @-webkit-keyframes floatAround-2 {
478 | 0%, 100% {
479 | -webkit-transform: translate3d(0, 0, 0);
480 | transform: translate3d(0, 0, 0);
481 | }
482 | 50% {
483 | -webkit-transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
484 | transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
485 | -webkit-animation-timing-function: ease-in;
486 | animation-timing-function: ease-in;
487 | }
488 | }
489 |
490 | @keyframes floatAround-2 {
491 | 0%, 100% {
492 | -webkit-transform: translate3d(0, 0, 0);
493 | transform: translate3d(0, 0, 0);
494 | }
495 | 50% {
496 | -webkit-transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
497 | transform: translate3d(0, 0.05em, 0) rotate3d(0, 0, 1, 1deg);
498 | -webkit-animation-timing-function: ease-in;
499 | animation-timing-function: ease-in;
500 | }
501 | }
502 |
503 | .js .featured-list__item {
504 | opacity: 0;
505 | -webkit-transform: translate3d(0, 10px, 0) scale3d(0.8, 0.8, 1);
506 | transform: translate3d(0, 10px, 0) scale3d(0.8, 0.8, 1);
507 | -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
508 | transition: opacity 0.3s, transform 0.3s;
509 | }
510 |
511 | .landing-layout--open .featured-list__item {
512 | pointer-events: auto;
513 | opacity: 1;
514 | -webkit-transform: scale3d(1, 1, 1);
515 | transform: scale3d(1, 1, 1);
516 | -webkit-transition: opacity 1.5s, -webkit-transform 0.8s;
517 | transition: opacity 1.5s, transform 0.8s;
518 | -webkit-transition-delay: 1.3s;
519 | transition-delay: 1.3s;
520 | }
521 |
522 | .landing-layout--open .featured-list__item:nth-child(2) {
523 | -webkit-transition-delay: 1.35s;
524 | transition-delay: 1.35s;
525 | }
526 |
527 | .landing-layout--open .featured-list__item:nth-child(3) {
528 | -webkit-transition-delay: 1.4s;
529 | transition-delay: 1.4s;
530 | }
531 |
532 | .landing-layout--open .featured-list__item:nth-child(4) {
533 | -webkit-transition-delay: 1.45s;
534 | transition-delay: 1.45s;
535 | }
536 |
537 | .landing-layout--open .featured-list__item:nth-child(5) {
538 | -webkit-transition-delay: 1.5s;
539 | transition-delay: 1.5s;
540 | }
541 |
542 | .landing-layout--open .featured-list__item:nth-child(6) {
543 | -webkit-transition-delay: 1.55s;
544 | transition-delay: 1.55s;
545 | }
546 |
547 | .codrops-header {
548 | -webkit-transition: opacity 0.5s 1.5s;
549 | transition: opacity 0.5s 1.5s;
550 | }
551 |
552 | .landing-layout--open .codrops-header {
553 | pointer-events: none;
554 | opacity: 0;
555 | -webkit-transition-delay: 0s;
556 | transition-delay: 0s;
557 | }
558 |
559 | .loader {
560 | position: fixed;
561 | width: 100vw;
562 | height: 100vh;
563 | background: #bfcbd6;
564 | top: 0;
565 | left: 0;
566 | pointer-events: none;
567 | display: -webkit-flex;
568 | display: -ms-flexbox;
569 | display: flex;
570 | -webkit-justify-content: center;
571 | -ms-flex-pack: center;
572 | justify-content: center;
573 | -webkit-align-items: center;
574 | -ms-flex-align: center;
575 | align-items: center;
576 | visibility: hidden;
577 | }
578 |
579 | .loader::after {
580 | position: absolute;
581 | content: 'Turn your \0009 \266A \0009 on';
582 | color: #7c91a5;
583 | top: 60%;
584 | width: 100%;
585 | left: 0;
586 | text-align: center;
587 | font-size: 1.5em;
588 | }
589 |
590 | .js .loader {
591 | visibility: visible;
592 | }
593 |
594 | .landing-layout--loaded .loader {
595 | opacity: 0;
596 | -webkit-transition: opacity 0.3s;
597 | transition: opacity 0.3s;
598 | }
599 |
600 | .loader__circle {
601 | fill: #fff;
602 | opacity: 0.1;
603 | -webkit-animation: moveUpDown 0.5s ease alternate infinite forwards;
604 | animation: moveUpDown 0.5s ease alternate infinite forwards;
605 | }
606 |
607 | .loader__circle:nth-child(2) {
608 | opacity: 0.8;
609 | -webkit-animation-delay: 0.1s;
610 | animation-delay: 0.1s;
611 | }
612 |
613 | .loader__circle:nth-child(3) {
614 | opacity: 0.3;
615 | -webkit-animation-delay: 0.4s;
616 | animation-delay: 0.4s;
617 | }
618 |
619 | @-webkit-keyframes moveUpDown {
620 | to {
621 | -webkit-transform: translate3d(0, -50px, 0);
622 | transform: translate3d(0, -50px, 0);
623 | opacity: 0.5;
624 | }
625 | }
626 |
627 | @keyframes moveUpDown {
628 | to {
629 | -webkit-transform: translate3d(0, -50px, 0);
630 | transform: translate3d(0, -50px, 0);
631 | opacity: 0.5;
632 | }
633 | }
634 |
635 | /* Media queries */
636 |
637 | @media screen and (max-width: 43.75em) {
638 | .codrops-demos {
639 | margin: 0 0 0 0.5em;
640 | width: 100%;
641 | }
642 | .codrops-demos::after {
643 | content: 'Tap anywhere to turn on sound';
644 | display: inline-block;
645 | margin: 1em 0 0 0;
646 | font-weight: bold;
647 | color: #fffe8d;
648 | }
649 | .landing-header__title {
650 | font-size: 2.5em;
651 | }
652 | .landing-layout--open .landing-header__title {
653 | -webkit-transform: translate3d(0, -40vh, 0);
654 | transform: translate3d(0, -40vh, 0);
655 | }
656 | .landing-header__tagline {
657 | font-size: 0.55em;
658 | }
659 | .featured-list {
660 | width: 100%;
661 | min-width: 0;
662 | max-width: none;
663 | margin-top: 15vh;
664 | }
665 | .featured-list__item {
666 | width: 50%;
667 | }
668 | .featured-list__img {
669 | width: 40px;
670 | max-width: none;
671 | min-width: 0;
672 | }
673 | .featured-list__title {
674 | font-size: 0.85em;
675 | }
676 | .button {
677 | font-size: 0.85em;
678 | }
679 | .codrops-header {
680 | font-size: 0.75em;
681 | }
682 | .codrops-header__title {
683 | padding: 0;
684 | }
685 | .loader::after {
686 | font-size: 1em;
687 | }
688 | }
689 |
--------------------------------------------------------------------------------
/js/howler.min.js:
--------------------------------------------------------------------------------
1 | /*! howler.js v2.0.0 | (c) 2013-2016, James Simpson of GoldFire Studios | MIT License | howlerjs.com */
2 | !function(){"use strict";var e=function(){this.init()};e.prototype={init:function(){var e=this||n;return e._codecs={},e._howls=[],e._muted=!1,e._volume=1,e._canPlayEvent="canplaythrough",e._navigator="undefined"!=typeof window&&window.navigator?window.navigator:null,e.masterGain=null,e.noAudio=!1,e.usingWebAudio=!0,e.autoSuspend=!0,e.ctx=null,e.mobileAutoEnable=!0,e._setup(),e},volume:function(e){var o=this||n;if(e=parseFloat(e),o.ctx||_(),"undefined"!=typeof e&&e>=0&&e<=1){if(o._volume=e,o._muted)return o;o.usingWebAudio&&(o.masterGain.gain.value=e);for(var t=0;t=0;o--)e._howls[o].unload();return e.usingWebAudio&&"undefined"!=typeof e.ctx.close&&(e.ctx.close(),e.ctx=null,_()),e},codecs:function(e){return(this||n)._codecs[e]},_setup:function(){var e=this||n;return e.state=e.ctx?e.ctx.state||"running":"running",e._autoSuspend(),e.noAudio||e._setupCodecs(),e},_setupCodecs:function(){var e=this||n,o="undefined"!=typeof Audio?new Audio:null;if(!o||"function"!=typeof o.canPlayType)return e;var t=o.canPlayType("audio/mpeg;").replace(/^no$/,""),r=e._navigator&&e._navigator.userAgent.match(/OPR\/([0-6].)/g),u=r&&parseInt(r[0].split("/")[1],10)<33;return e._codecs={mp3:!(u||!t&&!o.canPlayType("audio/mp3;").replace(/^no$/,"")),mpeg:!!t,opus:!!o.canPlayType('audio/ogg; codecs="opus"').replace(/^no$/,""),ogg:!!o.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),oga:!!o.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),wav:!!o.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),aac:!!o.canPlayType("audio/aac;").replace(/^no$/,""),caf:!!o.canPlayType("audio/x-caf;").replace(/^no$/,""),m4a:!!(o.canPlayType("audio/x-m4a;")||o.canPlayType("audio/m4a;")||o.canPlayType("audio/aac;")).replace(/^no$/,""),mp4:!!(o.canPlayType("audio/x-mp4;")||o.canPlayType("audio/mp4;")||o.canPlayType("audio/aac;")).replace(/^no$/,""),weba:!!o.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,""),webm:!!o.canPlayType('audio/webm; codecs="vorbis"').replace(/^no$/,""),dolby:!!o.canPlayType('audio/mp4; codecs="ec-3"').replace(/^no$/,"")},e},_enableMobileAudio:function(){var e=this||n,o=/iPhone|iPad|iPod|Android|BlackBerry|BB10|Silk|Mobi/i.test(e._navigator&&e._navigator.userAgent),t=!!("ontouchend"in window||e._navigator&&e._navigator.maxTouchPoints>0||e._navigator&&e._navigator.msMaxTouchPoints>0);if(!e._mobileEnabled&&e.ctx&&(o||t)){e._mobileEnabled=!1,e._mobileUnloaded||44100===e.ctx.sampleRate||(e._mobileUnloaded=!0,e.unload()),e._scratchBuffer=e.ctx.createBuffer(1,1,22050);var r=function(){var n=e.ctx.createBufferSource();n.buffer=e._scratchBuffer,n.connect(e.ctx.destination),"undefined"==typeof n.start?n.noteOn(0):n.start(0),n.onended=function(){n.disconnect(0),e._mobileEnabled=!0,e.mobileAutoEnable=!1,document.removeEventListener("touchend",r,!0)}};return document.addEventListener("touchend",r,!0),e}},_autoSuspend:function(){var e=this;if(e.autoSuspend&&e.ctx&&"undefined"!=typeof e.ctx.suspend&&n.usingWebAudio){for(var o=0;o0?d._seek:t._sprite[e][0]/1e3,_=(t._sprite[e][0]+t._sprite[e][1])/1e3-i,s=1e3*_/Math.abs(d._rate);d._paused=!1,d._ended=!1,d._sprite=e,d._seek=i,d._start=t._sprite[e][0]/1e3,d._stop=(t._sprite[e][0]+t._sprite[e][1])/1e3,d._loop=!(!d._loop&&!t._sprite[e][2]);var l=d._node;if(t._webAudio){var f=function(){t._refreshBuffer(d);var e=d._muted||t._muted?0:d._volume;l.gain.setValueAtTime(e,n.ctx.currentTime),d._playStart=n.ctx.currentTime,"undefined"==typeof l.bufferSource.start?d._loop?l.bufferSource.noteGrainOn(0,i,86400):l.bufferSource.noteGrainOn(0,i,_):d._loop?l.bufferSource.start(0,i,86400):l.bufferSource.start(0,i,_),s!==1/0&&(t._endTimers[d._id]=setTimeout(t._ended.bind(t,d),s)),o||setTimeout(function(){t._emit("play",d._id)},0)};"loaded"===t._state?f():(t.once("load",f,d._id),t._clearTimer(d._id))}else{var c=function(){l.currentTime=i,l.muted=d._muted||t._muted||n._muted||l.muted,l.volume=d._volume*n.volume(),l.playbackRate=d._rate,setTimeout(function(){l.play(),s!==1/0&&(t._endTimers[d._id]=setTimeout(t._ended.bind(t,d),s)),o||t._emit("play",d._id)},0)},p="loaded"===t._state&&(window&&window.ejecta||!l.readyState&&n._navigator.isCocoonJS);if(4===l.readyState||p)c();else{var m=function(){c(),l.removeEventListener(n._canPlayEvent,m,!1)};l.addEventListener(n._canPlayEvent,m,!1),t._clearTimer(d._id)}}return d._id},pause:function(e){var n=this;if("loaded"!==n._state)return n._queue.push({event:"pause",action:function(){n.pause(e)}}),n;for(var o=n._getSoundIds(e),t=0;t=0?o=parseInt(r[0],10):e=parseFloat(r[0])}else r.length>=2&&(e=parseFloat(r[0]),o=parseInt(r[1],10));var d;if(!("undefined"!=typeof e&&e>=0&&e<=1))return d=o?t._soundById(o):t._sounds[0],d?d._volume:0;if("loaded"!==t._state)return t._queue.push({event:"volume",action:function(){t.volume.apply(t,r)}}),t;"undefined"==typeof o&&(t._volume=e),o=t._getSoundIds(o);for(var i=0;io?"out":"in",i=a/.01,_=t/i;if("loaded"!==u._state)return u._queue.push({event:"fade",action:function(){u.fade(e,o,t,r)}}),u;u.volume(e,r);for(var s=u._getSoundIds(r),l=0;l=0?o=parseInt(r[0],10):e=parseFloat(r[0])}else 2===r.length&&(e=parseFloat(r[0]),o=parseInt(r[1],10));var d;if("number"!=typeof e)return d=t._soundById(o),d?d._rate:t._rate;if("loaded"!==t._state)return t._queue.push({event:"rate",action:function(){t.rate.apply(t,r)}}),t;"undefined"==typeof o&&(t._rate=e),o=t._getSoundIds(o);for(var i=0;i=0?o=parseInt(r[0],10):(o=t._sounds[0]._id,e=parseFloat(r[0]))}else 2===r.length&&(e=parseFloat(r[0]),o=parseInt(r[1],10));if("undefined"==typeof o)return t;if("loaded"!==t._state)return t._queue.push({event:"seek",action:function(){t.seek.apply(t,r)}}),t;var d=t._soundById(o);if(d){if(!("number"==typeof e&&e>=0)){if(t._webAudio){var i=t.playing(o)?n.ctx.currentTime-d._playStart:0,_=d._rateSeek?d._rateSeek-d._seek:0;return d._seek+(_+i*Math.abs(d._rate))}return d._node.currentTime}var s=t.playing(o);s&&t.pause(o,!0),d._seek=e,d._ended=!1,t._clearTimer(o),s&&t.play(o,!0),!t._webAudio&&d._node&&(d._node.currentTime=e),t._emit("seek",o)}return t},playing:function(e){var n=this;if("number"==typeof e){var o=n._soundById(e);return!!o&&!o._paused}for(var t=0;t=0&&n._howls.splice(u,1)}var a=!0;for(t=0;t=0;u--)r[u].id&&r[u].id!==n&&"load"!==e||(setTimeout(function(e){e.call(this,n,o)}.bind(t,r[u].fn),0),r[u].once&&t.off(e,r[u].fn,r[u].id));return t},_loadQueue:function(){var e=this;if(e._queue.length>0){var n=e._queue[0];e.once(n.event,function(){e._queue.shift(),e._loadQueue()}),n.action()}return e},_ended:function(e){var o=this,t=e._sprite,r=!(!e._loop&&!o._sprite[t][2]);if(o._emit("end",e._id),!o._webAudio&&r&&o.stop(e._id,!0).play(e._id),o._webAudio&&r){o._emit("play",e._id),e._seek=e._start||0,e._rateSeek=0,e._playStart=n.ctx.currentTime;var u=1e3*(e._stop-e._start)/Math.abs(e._rate);o._endTimers[e._id]=setTimeout(o._ended.bind(o,e),u)}return o._webAudio&&!r&&(e._paused=!0,e._ended=!0,e._seek=e._start||0,e._rateSeek=0,o._clearTimer(e._id),o._cleanBuffer(e._node),n._autoSuspend()),o._webAudio||r||o.stop(e._id),o},_clearTimer:function(e){var n=this;return n._endTimers[e]&&(clearTimeout(n._endTimers[e]),delete n._endTimers[e]),n},_soundById:function(e){for(var n=this,o=0;o=0;t--){if(o<=n)return;e._sounds[t]._ended&&(e._webAudio&&e._sounds[t]._node&&e._sounds[t]._node.disconnect(0),e._sounds.splice(t,1),o--)}}},_getSoundIds:function(e){var n=this;if("undefined"==typeof e){for(var o=[],t=0;t0&&(r[o._src]=e,i(o,e))},function(){o._emit("loaderror",null,"Decoding audio data failed.")})},i=function(e,n){n&&!e._duration&&(e._duration=n.duration),0===Object.keys(e._sprite).length&&(e._sprite={__default:[0,1e3*e._duration]}),"loaded"!==e._state&&(e._state="loaded",e._emit("load"),e._loadQueue()),e._autoplay&&e.play()},_=function(){n.noAudio=!1;try{"undefined"!=typeof AudioContext?n.ctx=new AudioContext:"undefined"!=typeof webkitAudioContext?n.ctx=new webkitAudioContext:n.usingWebAudio=!1}catch(e){n.usingWebAudio=!1}if(!n.usingWebAudio)if("undefined"!=typeof Audio)try{var e=new Audio;"undefined"==typeof e.oncanplaythrough&&(n._canPlayEvent="canplay")}catch(e){n.noAudio=!0}else n.noAudio=!0;try{var e=new Audio;e.muted&&(n.noAudio=!0)}catch(e){}var o=/iP(hone|od|ad)/.test(n._navigator&&n._navigator.platform),t=n._navigator&&n._navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/),r=t?parseInt(t[1],10):null;if(o&&r&&r<9){var u=/safari/.test(n._navigator&&n._navigator.userAgent.toLowerCase());(n._navigator&&n._navigator.standalone&&!u||n._navigator&&!n._navigator.standalone&&!u)&&(n.usingWebAudio=!1)}n.usingWebAudio&&(n.masterGain="undefined"==typeof n.ctx.createGain?n.ctx.createGainNode():n.ctx.createGain(),n.masterGain.gain.value=1,n.masterGain.connect(n.ctx.destination)),n._setup()};"function"==typeof define&&define.amd&&define([],function(){return{Howler:n,Howl:o}}),"undefined"!=typeof exports&&(exports.Howler=n,exports.Howl=o),"undefined"!=typeof window?(window.HowlerGlobal=e,window.Howler=n,window.Howl=o,window.Sound=t):"undefined"!=typeof global&&(global.HowlerGlobal=e,global.Howler=n,global.Howl=o,global.Sound=t)}();
3 | /*! Spatial Plugin */
4 | !function(){"use strict";HowlerGlobal.prototype._pos=[0,0,0],HowlerGlobal.prototype._orientation=[0,0,-1,0,1,0],HowlerGlobal.prototype.stereo=function(e){var n=this;if(!n.ctx||!n.ctx.listener)return n;for(var t=n._howls.length-1;t>=0;t--)n._howls[t].stereo(e);return n},HowlerGlobal.prototype.pos=function(e,n,t){var o=this;return o.ctx&&o.ctx.listener?(n="number"!=typeof n?o._pos[1]:n,t="number"!=typeof t?o._pos[2]:t,"number"!=typeof e?o._pos:(o._pos=[e,n,t],o.ctx.listener.setPosition(o._pos[0],o._pos[1],o._pos[2]),o)):o},HowlerGlobal.prototype.orientation=function(e,n,t,o,r,i){var a=this;if(!a.ctx||!a.ctx.listener)return a;var p=a._orientation;return n="number"!=typeof n?p[1]:n,t="number"!=typeof t?p[2]:t,o="number"!=typeof o?p[3]:o,r="number"!=typeof r?p[4]:r,i="number"!=typeof i?p[5]:i,"number"!=typeof e?p:(a._orientation=[e,n,t,o,r,i],a.ctx.listener.setOrientation(e,n,t,o,r,i),a)},Howl.prototype.init=function(e){return function(n){var t=this;return t._orientation=n.orientation||[1,0,0],t._stereo=n.stereo||null,t._pos=n.pos||null,t._pannerAttr={coneInnerAngle:"undefined"!=typeof n.coneInnerAngle?n.coneInnerAngle:360,coneOuterAngle:"undefined"!=typeof n.coneOuterAngle?n.coneOuterAngle:360,coneOuterGain:"undefined"!=typeof n.coneOuterGain?n.coneOuterGain:0,distanceModel:"undefined"!=typeof n.distanceModel?n.distanceModel:"inverse",maxDistance:"undefined"!=typeof n.maxDistance?n.maxDistance:1e4,panningModel:"undefined"!=typeof n.panningModel?n.panningModel:"HRTF",refDistance:"undefined"!=typeof n.refDistance?n.refDistance:1,rolloffFactor:"undefined"!=typeof n.rolloffFactor?n.rolloffFactor:1},t._onstereo=n.onstereo?[{fn:n.onstereo}]:[],t._onpos=n.onpos?[{fn:n.onpos}]:[],t._onorientation=n.onorientation?[{fn:n.onorientation}]:[],e.call(this,n)}}(Howl.prototype.init),Howl.prototype.stereo=function(n,t){var o=this;if(!o._webAudio)return o;if("loaded"!==o._state)return o._queue.push({event:"stereo",action:function(){o.stereo(n,t)}}),o;var r="undefined"==typeof Howler.ctx.createStereoPanner?"spatial":"stereo";if("undefined"==typeof t){if("number"!=typeof n)return o._stereo;o._stereo=n,o._pos=[n,0,0]}for(var i=o._getSoundIds(t),a=0;a
101 | 
107 | 
113 | 
119 | 
125 | 
131 | 
101 | 
107 | 
113 | 
119 | 
125 | 
131 | 
101 | 
107 | 
113 | 
119 | 
125 | 
131 |