").append(m.parseHTML(a)).find(d):a)}).complete(c&&function(a,b){g.each(c,e||[a.responseText,b,a])}),this},m.expr.filters.animated=function(a){return m.grep(m.timers,function(b){return a===b.elem}).length};var cd=a.document.documentElement;function dd(a){return m.isWindow(a)?a:9===a.nodeType?a.defaultView||a.parentWindow:!1}m.offset={setOffset:function(a,b,c){var d,e,f,g,h,i,j,k=m.css(a,"position"),l=m(a),n={};"static"===k&&(a.style.position="relative"),h=l.offset(),f=m.css(a,"top"),i=m.css(a,"left"),j=("absolute"===k||"fixed"===k)&&m.inArray("auto",[f,i])>-1,j?(d=l.position(),g=d.top,e=d.left):(g=parseFloat(f)||0,e=parseFloat(i)||0),m.isFunction(b)&&(b=b.call(a,c,h)),null!=b.top&&(n.top=b.top-h.top+g),null!=b.left&&(n.left=b.left-h.left+e),"using"in b?b.using.call(a,n):l.css(n)}},m.fn.extend({offset:function(a){if(arguments.length)return void 0===a?this:this.each(function(b){m.offset.setOffset(this,a,b)});var b,c,d={top:0,left:0},e=this[0],f=e&&e.ownerDocument;if(f)return b=f.documentElement,m.contains(b,e)?(typeof e.getBoundingClientRect!==K&&(d=e.getBoundingClientRect()),c=dd(f),{top:d.top+(c.pageYOffset||b.scrollTop)-(b.clientTop||0),left:d.left+(c.pageXOffset||b.scrollLeft)-(b.clientLeft||0)}):d},position:function(){if(this[0]){var a,b,c={top:0,left:0},d=this[0];return"fixed"===m.css(d,"position")?b=d.getBoundingClientRect():(a=this.offsetParent(),b=this.offset(),m.nodeName(a[0],"html")||(c=a.offset()),c.top+=m.css(a[0],"borderTopWidth",!0),c.left+=m.css(a[0],"borderLeftWidth",!0)),{top:b.top-c.top-m.css(d,"marginTop",!0),left:b.left-c.left-m.css(d,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var a=this.offsetParent||cd;while(a&&!m.nodeName(a,"html")&&"static"===m.css(a,"position"))a=a.offsetParent;return a||cd})}}),m.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(a,b){var c=/Y/.test(b);m.fn[a]=function(d){return V(this,function(a,d,e){var f=dd(a);return void 0===e?f?b in f?f[b]:f.document.documentElement[d]:a[d]:void(f?f.scrollTo(c?m(f).scrollLeft():e,c?e:m(f).scrollTop()):a[d]=e)},a,d,arguments.length,null)}}),m.each(["top","left"],function(a,b){m.cssHooks[b]=Lb(k.pixelPosition,function(a,c){return c?(c=Jb(a,b),Hb.test(c)?m(a).position()[b]+"px":c):void 0})}),m.each({Height:"height",Width:"width"},function(a,b){m.each({padding:"inner"+a,content:b,"":"outer"+a},function(c,d){m.fn[d]=function(d,e){var f=arguments.length&&(c||"boolean"!=typeof d),g=c||(d===!0||e===!0?"margin":"border");return V(this,function(b,c,d){var e;return m.isWindow(b)?b.document.documentElement["client"+a]:9===b.nodeType?(e=b.documentElement,Math.max(b.body["scroll"+a],e["scroll"+a],b.body["offset"+a],e["offset"+a],e["client"+a])):void 0===d?m.css(b,c,g):m.style(b,c,d,g)},b,f?d:void 0,f,null)}})}),m.fn.size=function(){return this.length},m.fn.andSelf=m.fn.addBack,"function"==typeof define&&define.amd&&define("jquery",[],function(){return m});var ed=a.jQuery,fd=a.$;return m.noConflict=function(b){return a.$===m&&(a.$=fd),b&&a.jQuery===m&&(a.jQuery=ed),m},typeof b===K&&(a.jQuery=a.$=m),m});
5 |
--------------------------------------------------------------------------------
/demo/css/demo.css:
--------------------------------------------------------------------------------
1 | .left {
2 | text-align: left; }
3 |
4 | .right {
5 | text-align: right; }
6 |
7 | .center {
8 | text-align: center; }
9 |
10 | .sep {
11 | border-top: 1px solid #d9dae3; }
12 |
13 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
14 | margin: 0;
15 | padding: 0;
16 | border: 0;
17 | font-size: 100%;
18 | font: inherit;
19 | vertical-align: baseline; }
20 |
21 | /* HTML5 display-role reset for older browsers */
22 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
23 | display: block; }
24 |
25 | body {
26 | line-height: 1; }
27 |
28 | ol, ul {
29 | list-style: none; }
30 |
31 | blockquote, q {
32 | quotes: none; }
33 |
34 | blockquote:before, blockquote:after {
35 | content: '';
36 | content: none; }
37 |
38 | q:before, q:after {
39 | content: '';
40 | content: none; }
41 |
42 | table {
43 | border-collapse: collapse;
44 | border-spacing: 0; }
45 |
46 | html {
47 | font-family: 'Lato';
48 | font-size: 6.25%; }
49 |
50 | body {
51 | background-color: #ececf5;
52 | font-size: 18rem;
53 | /*13px*/
54 | line-height: 1.6;
55 | color: #5b5f7c;
56 | -webkit-font-smoothing: subpixel-antialiased;
57 | -moz-osx-font-smoothing: auto;
58 | overflow-x: hidden; }
59 |
60 | a {
61 | color: #64dac2;
62 | text-decoration: none;
63 | -webkit-transition: all .3s ease;
64 | -moz-transition: all .3s ease;
65 | -ms-transition: all .3s ease;
66 | -o-transition: all .3s ease;
67 | transition: all .3s ease; }
68 | a:hover {
69 | background-color: #64dac2;
70 | color: #ececf5; }
71 |
72 | pre {
73 | font-size: 18rem; }
74 |
75 | strong {
76 | font-weight: bold; }
77 |
78 | .text-sub {
79 | color: #adb0c3; }
80 |
81 | .note {
82 | padding: 0.1em 0.5em;
83 | margin: 0.5em 0;
84 | color: #da6490;
85 | background-color: #f7e0e8; }
86 |
87 | .info {
88 | background-color: white;
89 | padding: 0.1em 0.5em;
90 | margin: 0.5em 0;
91 | color: #da6490; }
92 |
93 | .table-basic {
94 | font-size: 14rem;
95 | text-align: center;
96 | border-left: 2px solid #ececf5;
97 | border-top: 2px solid #ececf5; }
98 | .table-basic tr th {
99 | border-right: 2px solid #ececf5;
100 | border-bottom: 2px solid #ececf5;
101 | padding: 0.5em 1em; }
102 | .table-basic tr td {
103 | border-right: 2px solid #ececf5;
104 | border-bottom: 2px solid #ececf5;
105 | padding: 0.5em 1em; }
106 | .table-basic thead tr {
107 | background-color: #5b5f7c;
108 | color: #ececf5; }
109 | .table-basic tbody tr {
110 | background-color: rgba(255, 255, 255, 0.5); }
111 | .table-basic tbody tr th {
112 | background-color: rgba(91, 95, 124, 0.08); }
113 |
114 | .nav {
115 | position: fixed;
116 | z-index: 9999;
117 | width: 100%;
118 | font-size: 20rem;
119 | font-weight: 300;
120 | top: 0;
121 | left: 0;
122 | -webkit-transition: all .3s ease;
123 | -moz-transition: all .3s ease;
124 | -ms-transition: all .3s ease;
125 | -o-transition: all .3s ease;
126 | transition: all .3s ease; }
127 | .nav__nav-list {
128 | padding: 1em;
129 | text-align: center; }
130 | .nav__nav-list__item {
131 | display: inline-block; }
132 | .nav__nav-list__item__hit {
133 | display: block;
134 | color: white;
135 | padding: 0.4em 1em;
136 | text-decoration: none; }
137 | .nav__nav-list__item__hit:hover {
138 | color: #ececf5; }
139 | .js-switch .nav {
140 | background-color: rgba(236, 236, 245, 0.9); }
141 | .js-switch .nav__nav-list__item__hit {
142 | color: #5b5f7c; }
143 | .js-switch .nav__nav-list__item__hit:hover {
144 | color: #ececf5; }
145 |
146 | .wrapper {
147 | max-width: 680px;
148 | padding: 0 20px;
149 | margin: 20px auto;
150 | text-align: left; }
151 |
152 | .section {
153 | padding: 40px 10px;
154 | z-index: 2;
155 | position: relative; }
156 | .section__title {
157 | text-align: center;
158 | font-size: 80rem;
159 | font-weight: 100;
160 | line-height: 1.2; }
161 | .section__text {
162 | margin-bottom: 1em; }
163 |
164 | body .section:nth-child(2n) {
165 | background-color: #e5e5f1; }
166 |
167 | .sub-section {
168 | padding: 0 0 20px 0;
169 | z-index: 2;
170 | text-align: center;
171 | position: relative; }
172 | .sub-section__title {
173 | text-align: center;
174 | font-size: 30rem;
175 | margin: 1em 0; }
176 | .sub-section__sub-title {
177 | text-align: left;
178 | font-size: 26rem;
179 | margin: 1em 0; }
180 | .sub-section__text {
181 | margin-bottom: 1em; }
182 |
183 | .section--main {
184 | overflow: hidden;
185 | text-align: center;
186 | background: #3f227e;
187 | /* Old browsers */
188 | background: -moz-linear-gradient(top, #3f227e 0%, #375e99 100%);
189 | /* FF3.6+ */
190 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f227e), color-stop(100%, #375e99));
191 | /* Chrome,Safari4+ */
192 | background: -webkit-linear-gradient(top, #3f227e 0%, #375e99 100%);
193 | /* Chrome10+,Safari5.1+ */
194 | background: -o-linear-gradient(top, #3f227e 0%, #375e99 100%);
195 | /* Opera 11.10+ */
196 | background: -ms-linear-gradient(top, #3f227e 0%, #375e99 100%);
197 | /* IE10+ */
198 | background: linear-gradient(to bottom, #3f227e 0%, #375e99 100%);
199 | /* W3C */
200 | padding: 10em 0 3em 0;
201 | background-color: black;
202 | color: #ececf5;
203 | border-bottom: none; }
204 | .section--main__title {
205 | position: relative;
206 | z-index: 10;
207 | font-size: 80rem;
208 | font-weight: 100;
209 | letter-spacing: 0.2em;
210 | margin-bottom: 0.2em;
211 | -webkit-transition: all 4s ease-out;
212 | -moz-transition: all 4s ease-out;
213 | -ms-transition: all 4s ease-out;
214 | -o-transition: all 4s ease-out;
215 | transition: all 4s ease-out;
216 | letter-spacing: 0;
217 | text-shadow: 1px 1px 10px rgba(105, 103, 202, 0.8);
218 | letter-spacing: 0.1em;
219 | -webkit-transform: scale(0.8);
220 | -moz-transform: scale(0.8);
221 | -ms-transform: scale(0.8);
222 | -o-transform: scale(0.8);
223 | transform: scale(0.8); }
224 | .loaded .section--main__title {
225 | letter-spacing: 0.1em;
226 | -webkit-transform: scale(1);
227 | -moz-transform: scale(1);
228 | -ms-transform: scale(1);
229 | -o-transform: scale(1);
230 | transform: scale(1); }
231 | .section--main__ver {
232 | position: relative;
233 | z-index: 10;
234 | font-size: 14rem;
235 | margin: 1em;
236 | font-weight: 200; }
237 | .section--main__caption {
238 | position: relative;
239 | z-index: 10;
240 | margin: 0.5em;
241 | font-size: 26rem;
242 | font-weight: 300;
243 | letter-spacing: 0.02em;
244 | color: #64dac2; }
245 | .section--main__btn {
246 | position: relative;
247 | z-index: 10;
248 | margin-top: 20px;
249 | display: inline-block;
250 | padding: 0.8em 1.5em;
251 | border: 2px solid rgba(217, 218, 227, 0.3);
252 | font-size: 24rem;
253 | font-weight: 300;
254 | text-decoration: none;
255 | color: #ececf5;
256 | -webkit-transition: all 0.2s ease;
257 | -moz-transition: all 0.2s ease;
258 | -ms-transition: all 0.2s ease;
259 | -o-transition: all 0.2s ease;
260 | transition: all 0.2s ease; }
261 | .section--main__btn span {
262 | vertical-align: top; }
263 | .section--main__btn small {
264 | font-size: 18rem; }
265 | .section--main__btn i {
266 | padding-right: 0.2em; }
267 | .section--main__btn:hover {
268 | background-color: rgba(105, 103, 202, 0.9);
269 | border: 2px solid #6967ca; }
270 | .section--main__canvas {
271 | position: absolute;
272 | z-index: 3;
273 | top: 0;
274 | left: 50%;
275 | margin: 0 0 0 -1000px; }
276 | .section--main__waveform {
277 | opacity: 0;
278 | width: 150%;
279 | height: 500px;
280 | max-height: 500px;
281 | position: absolute;
282 | z-index: 2;
283 | top: 0;
284 | left: -25%;
285 | -webkit-transition: all 4s ease;
286 | -moz-transition: all 4s ease;
287 | -ms-transition: all 4s ease;
288 | -o-transition: all 4s ease;
289 | transition: all 4s ease; }
290 | .loaded .section--main__waveform {
291 | opacity: 1; }
292 | .section--main__waveform .waveform {
293 | width: 100%;
294 | height: 100%;
295 | fill: none;
296 | stroke-width: .07; }
297 | .section--main__waveform .blue {
298 | stroke: rgba(100, 104, 255, 0.3); }
299 | .section--main__waveform .red {
300 | stroke: rgba(100, 68, 150, 0.3); }
301 | .section--main__waveform .green {
302 | stroke: rgba(100, 155, 102, 0.3); }
303 | .section--main:before {
304 | content: '';
305 | position: absolute;
306 | background: #3f227e;
307 | /* Old browsers */
308 | background: -moz-linear-gradient(top, #3f227e 0%, #375e99 100%);
309 | /* FF3.6+ */
310 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3f227e), color-stop(100%, #375e99));
311 | /* Chrome,Safari4+ */
312 | background: -webkit-linear-gradient(top, #3f227e 0%, #375e99 100%);
313 | /* Chrome10+,Safari5.1+ */
314 | background: -o-linear-gradient(top, #3f227e 0%, #375e99 100%);
315 | /* Opera 11.10+ */
316 | background: -ms-linear-gradient(top, #3f227e 0%, #375e99 100%);
317 | /* IE10+ */
318 | background: linear-gradient(to bottom, #3f227e 0%, #375e99 100%);
319 | /* W3C */
320 | opacity: 0.5;
321 | bottom: -200%;
322 | left: 0;
323 | width: 50%;
324 | height: 200%;
325 | z-index: 1;
326 | -webkit-transform-origin: right top;
327 | -moz-transform-origin: right top;
328 | -ms-transform-origin: right top;
329 | -o-transform-origin: right top;
330 | transform-origin: right top;
331 | -webkit-transform: skewY(45deg);
332 | -moz-transform: skewY(45deg);
333 | -ms-transform: skewY(45deg);
334 | -o-transform: skewY(45deg);
335 | transform: skewY(45deg); }
336 | .section--main:after {
337 | content: '';
338 | position: absolute;
339 | background: #375e99;
340 | /* Old browsers */
341 | background: -moz-linear-gradient(top, #375e99 0%, #3f227e 100%);
342 | /* FF3.6+ */
343 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #375e99), color-stop(100%, #3f227e));
344 | /* Chrome,Safari4+ */
345 | background: -webkit-linear-gradient(top, #375e99 0%, #3f227e 100%);
346 | /* Chrome10+,Safari5.1+ */
347 | background: -o-linear-gradient(top, #375e99 0%, #3f227e 100%);
348 | /* Opera 11.10+ */
349 | background: -ms-linear-gradient(top, #375e99 0%, #3f227e 100%);
350 | /* IE10+ */
351 | background: linear-gradient(to bottom, #375e99 0%, #3f227e 100%);
352 | /* W3C */
353 | opacity: 0.5;
354 | bottom: -200%;
355 | right: 0;
356 | width: 50%;
357 | height: 200%;
358 | z-index: 1;
359 | -webkit-transform-origin: left top;
360 | -moz-transform-origin: left top;
361 | -ms-transform-origin: left top;
362 | -o-transform-origin: left top;
363 | transform-origin: left top;
364 | -webkit-transform: skewY(-45deg);
365 | -moz-transform: skewY(-45deg);
366 | -ms-transform: skewY(-45deg);
367 | -o-transform: skewY(-45deg);
368 | transform: skewY(-45deg); }
369 | @media screen and (max-width: 900px) {
370 | .section--main__title {
371 | -webkit-transition: all 0s ease-out;
372 | -moz-transition: all 0s ease-out;
373 | -ms-transition: all 0s ease-out;
374 | -o-transition: all 0s ease-out;
375 | transition: all 0s ease-out;
376 | font-size: 40rem; }
377 | .section--main__caption {
378 | font-size: 16rem; } }
379 |
380 | .sound-trigger--type-default.sound-trigger {
381 | display: inline-block;
382 | width: 100px;
383 | height: 100px;
384 | position: relative;
385 | margin: 10px;
386 | -webkit-border-radius: 100px;
387 | -moz-border-radius: 100px;
388 | -ms-border-radius: 100px;
389 | -o-border-radius: 100px;
390 | border-radius: 100px; }
391 | .sound-trigger--type-default.sound-trigger:after {
392 | -webkit-transition: all .3s ease;
393 | -moz-transition: all .3s ease;
394 | -ms-transition: all .3s ease;
395 | -o-transition: all .3s ease;
396 | transition: all .3s ease;
397 | content: '';
398 | position: absolute;
399 | top: 0;
400 | left: 0;
401 | z-index: 48;
402 | width: 100%;
403 | height: 100%;
404 | background-color: rgba(105, 103, 202, 0.2);
405 | -webkit-border-radius: 100px;
406 | -moz-border-radius: 100px;
407 | -ms-border-radius: 100px;
408 | -o-border-radius: 100px;
409 | border-radius: 100px; }
410 | .sound-trigger--type-default.sound-trigger--type-hover:hover:after {
411 | -webkit-transform: scale(1.25);
412 | -moz-transform: scale(1.25);
413 | -ms-transform: scale(1.25);
414 | -o-transform: scale(1.25);
415 | transform: scale(1.25); }
416 | .sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover {
417 | -webkit-transform: scale(0.9);
418 | -moz-transform: scale(0.9);
419 | -ms-transform: scale(0.9);
420 | -o-transform: scale(0.9);
421 | transform: scale(0.9);
422 | background-color: rgba(105, 103, 202, 0.5);
423 | vertical-align: middle; }
424 | .sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover i {
425 | text-shadow: none; }
426 | .sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__inner:hover img {
427 | vertical-align: middle; }
428 | .sound-trigger--type-default.sound-trigger--type-hover .sound-trigger__speach {
429 | -webkit-animation: motion__hover 2s ease 0s infinite alternate;
430 | -moz-animation: motion__hover 2s ease 0s infinite alternate;
431 | -ms-animation: motion__hover 2s ease 0s infinite alternate;
432 | -o-animation: motion__hover 2s ease 0s infinite alternate;
433 | animation: motion__hover 2s ease 0s infinite alternate; }
434 | .sound-trigger--type-default.sound-trigger--type-click:active:after {
435 | -webkit-transform: scale(1.25);
436 | -moz-transform: scale(1.25);
437 | -ms-transform: scale(1.25);
438 | -o-transform: scale(1.25);
439 | transform: scale(1.25); }
440 | .sound-trigger--type-default.sound-trigger--type-click .sound-trigger__inner:active {
441 | -webkit-transform: scale(0.9);
442 | -moz-transform: scale(0.9);
443 | -ms-transform: scale(0.9);
444 | -o-transform: scale(0.9);
445 | transform: scale(0.9);
446 | background-color: rgba(105, 103, 202, 0.5); }
447 | .sound-trigger--type-default.sound-trigger--type-click .sound-trigger__inner:active i {
448 | text-shadow: none; }
449 | .sound-trigger--type-default.sound-trigger--type-click .sound-trigger__speach {
450 | -webkit-animation: motion__click 1s ease 0s infinite;
451 | -moz-animation: motion__click 1s ease 0s infinite;
452 | -ms-animation: motion__click 1s ease 0s infinite;
453 | -o-animation: motion__click 1s ease 0s infinite;
454 | animation: motion__click 1s ease 0s infinite; }
455 | .sound-trigger--type-default .sound-trigger__inner {
456 | width: 100%;
457 | height: 100%;
458 | overflow: hidden;
459 | text-align: center;
460 | -webkit-border-radius: 100px;
461 | -moz-border-radius: 100px;
462 | -ms-border-radius: 100px;
463 | -o-border-radius: 100px;
464 | border-radius: 100px;
465 | -webkit-transition: all .3s ease;
466 | -moz-transition: all .3s ease;
467 | -ms-transition: all .3s ease;
468 | -o-transition: all .3s ease;
469 | transition: all .3s ease;
470 | background-color: #6967ca;
471 | color: #ececf5;
472 | cursor: pointer;
473 | position: relative;
474 | z-index: 50; }
475 | .sound-trigger--type-default .sound-trigger__inner i {
476 | font-size: 40px;
477 | line-height: 100px;
478 | -webkit-transition: all .1s ease;
479 | -moz-transition: all .1s ease;
480 | -ms-transition: all .1s ease;
481 | -o-transition: all .1s ease;
482 | transition: all .1s ease;
483 | text-shadow: 0px 0px 0 #625fc7,1px 1px 0 #625fc7,2px 2px 0 #625fc7,3px 3px 0 #625fc7,4px 4px 0 #625fc7,5px 5px 0 #625fc7,6px 6px 0 #625fc7,7px 7px 0 #625fc7,8px 8px 0 #625fc7,9px 9px 0 #625fc7,10px 10px 0 #625fc7,11px 11px 0 #625fc7,12px 12px 0 #625fc7,13px 13px 0 #625fc7,14px 14px 0 #625fc7,15px 15px 0 #625fc7,16px 16px 0 #625fc7,17px 17px 0 #625fc7,18px 18px 0 #625fc7,19px 19px 0 #625fc7,20px 20px 0 #625fc7,21px 21px 0 #625fc7,22px 22px 0 #625fc7,23px 23px 0 #625fc7,24px 24px 0 #625fc7,25px 25px 0 #625fc7,26px 26px 0 #625fc7,27px 27px 0 #625fc7,28px 28px 0 #625fc7,29px 29px 0 #625fc7,30px 30px 0 #625fc7,31px 31px 0 #625fc7,32px 32px 0 #625fc7,33px 33px 0 #625fc7,34px 34px 0 #625fc7,35px 35px 0 #625fc7,36px 36px 0 #625fc7,37px 37px 0 #625fc7,38px 38px 0 #625fc7,39px 39px 0 #625fc7,40px 40px 0 #625fc7,41px 41px 0 #625fc7,42px 42px 0 #625fc7,43px 43px 0 #625fc7,45px 45px 0 transparent; }
484 | .sound-trigger--type-default .sound-trigger__speach {
485 | position: absolute;
486 | z-index: 60;
487 | width: 100%;
488 | background-color: #5b5f7c;
489 | color: #ececf5;
490 | -webkit-border-radius: 3px;
491 | -moz-border-radius: 3px;
492 | -ms-border-radius: 3px;
493 | -o-border-radius: 3px;
494 | border-radius: 3px;
495 | font-size: 14rem;
496 | top: -3em;
497 | left: 0;
498 | text-align: center; }
499 | .sound-trigger--type-default .sound-trigger__speach:after {
500 | top: 100%;
501 | left: 50%;
502 | border: solid transparent;
503 | content: " ";
504 | height: 0;
505 | width: 0;
506 | position: absolute;
507 | pointer-events: none;
508 | border-top-color: #5b5f7c;
509 | border-width: 4px;
510 | margin-left: -4px; }
511 |
512 | .sound-trigger--type-default-2.sound-trigger {
513 | display: inline-block;
514 | width: 100px;
515 | height: 100px;
516 | position: relative;
517 | margin: 10px;
518 | -webkit-border-radius: 100px;
519 | -moz-border-radius: 100px;
520 | -ms-border-radius: 100px;
521 | -o-border-radius: 100px;
522 | border-radius: 100px; }
523 | .sound-trigger--type-default-2.sound-trigger:after {
524 | -webkit-transition: all .3s ease;
525 | -moz-transition: all .3s ease;
526 | -ms-transition: all .3s ease;
527 | -o-transition: all .3s ease;
528 | transition: all .3s ease;
529 | content: '';
530 | position: absolute;
531 | top: 0;
532 | left: 0;
533 | z-index: 48;
534 | width: 100%;
535 | height: 100%;
536 | background-color: rgba(100, 218, 194, 0.2);
537 | -webkit-border-radius: 100px;
538 | -moz-border-radius: 100px;
539 | -ms-border-radius: 100px;
540 | -o-border-radius: 100px;
541 | border-radius: 100px; }
542 | .sound-trigger--type-default-2.sound-trigger--type-hover:hover:after {
543 | -webkit-transform: scale(1.25);
544 | -moz-transform: scale(1.25);
545 | -ms-transform: scale(1.25);
546 | -o-transform: scale(1.25);
547 | transform: scale(1.25); }
548 | .sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover {
549 | -webkit-transform: scale(0.9);
550 | -moz-transform: scale(0.9);
551 | -ms-transform: scale(0.9);
552 | -o-transform: scale(0.9);
553 | transform: scale(0.9);
554 | background-color: rgba(100, 218, 194, 0.5);
555 | vertical-align: middle; }
556 | .sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover i {
557 | text-shadow: none; }
558 | .sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__inner:hover img {
559 | vertical-align: middle; }
560 | .sound-trigger--type-default-2.sound-trigger--type-hover .sound-trigger__speach {
561 | -webkit-animation: motion__hover 2s ease 0s infinite alternate;
562 | -moz-animation: motion__hover 2s ease 0s infinite alternate;
563 | -ms-animation: motion__hover 2s ease 0s infinite alternate;
564 | -o-animation: motion__hover 2s ease 0s infinite alternate;
565 | animation: motion__hover 2s ease 0s infinite alternate; }
566 | .sound-trigger--type-default-2.sound-trigger--type-click:active:after {
567 | -webkit-transform: scale(1.25);
568 | -moz-transform: scale(1.25);
569 | -ms-transform: scale(1.25);
570 | -o-transform: scale(1.25);
571 | transform: scale(1.25); }
572 | .sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__inner:active {
573 | -webkit-transform: scale(0.9);
574 | -moz-transform: scale(0.9);
575 | -ms-transform: scale(0.9);
576 | -o-transform: scale(0.9);
577 | transform: scale(0.9);
578 | background-color: rgba(100, 218, 194, 0.5); }
579 | .sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__inner:active i {
580 | text-shadow: none; }
581 | .sound-trigger--type-default-2.sound-trigger--type-click .sound-trigger__speach {
582 | -webkit-animation: motion__click 1s ease 0s infinite;
583 | -moz-animation: motion__click 1s ease 0s infinite;
584 | -ms-animation: motion__click 1s ease 0s infinite;
585 | -o-animation: motion__click 1s ease 0s infinite;
586 | animation: motion__click 1s ease 0s infinite; }
587 | .sound-trigger--type-default-2 .sound-trigger__inner {
588 | width: 100%;
589 | height: 100%;
590 | overflow: hidden;
591 | text-align: center;
592 | -webkit-border-radius: 100px;
593 | -moz-border-radius: 100px;
594 | -ms-border-radius: 100px;
595 | -o-border-radius: 100px;
596 | border-radius: 100px;
597 | -webkit-transition: all .3s ease;
598 | -moz-transition: all .3s ease;
599 | -ms-transition: all .3s ease;
600 | -o-transition: all .3s ease;
601 | transition: all .3s ease;
602 | background-color: #64dac2;
603 | color: #ececf5;
604 | cursor: pointer;
605 | position: relative;
606 | z-index: 50; }
607 | .sound-trigger--type-default-2 .sound-trigger__inner i {
608 | font-size: 40px;
609 | line-height: 100px;
610 | -webkit-transition: all .1s ease;
611 | -moz-transition: all .1s ease;
612 | -ms-transition: all .1s ease;
613 | -o-transition: all .1s ease;
614 | transition: all .1s ease;
615 | text-shadow: 0px 0px 0 #5cd8bf,1px 1px 0 #5cd8bf,2px 2px 0 #5cd8bf,3px 3px 0 #5cd8bf,4px 4px 0 #5cd8bf,5px 5px 0 #5cd8bf,6px 6px 0 #5cd8bf,7px 7px 0 #5cd8bf,8px 8px 0 #5cd8bf,9px 9px 0 #5cd8bf,10px 10px 0 #5cd8bf,11px 11px 0 #5cd8bf,12px 12px 0 #5cd8bf,13px 13px 0 #5cd8bf,14px 14px 0 #5cd8bf,15px 15px 0 #5cd8bf,16px 16px 0 #5cd8bf,17px 17px 0 #5cd8bf,18px 18px 0 #5cd8bf,19px 19px 0 #5cd8bf,20px 20px 0 #5cd8bf,21px 21px 0 #5cd8bf,22px 22px 0 #5cd8bf,23px 23px 0 #5cd8bf,24px 24px 0 #5cd8bf,25px 25px 0 #5cd8bf,26px 26px 0 #5cd8bf,27px 27px 0 #5cd8bf,28px 28px 0 #5cd8bf,29px 29px 0 #5cd8bf,30px 30px 0 #5cd8bf,31px 31px 0 #5cd8bf,32px 32px 0 #5cd8bf,33px 33px 0 #5cd8bf,34px 34px 0 #5cd8bf,35px 35px 0 #5cd8bf,36px 36px 0 #5cd8bf,37px 37px 0 #5cd8bf,38px 38px 0 #5cd8bf,39px 39px 0 #5cd8bf,40px 40px 0 #5cd8bf,41px 41px 0 #5cd8bf,42px 42px 0 #5cd8bf,43px 43px 0 #5cd8bf,45px 45px 0 transparent; }
616 | .sound-trigger--type-default-2 .sound-trigger__speach {
617 | position: absolute;
618 | z-index: 60;
619 | width: 100%;
620 | background-color: #5b5f7c;
621 | color: #ececf5;
622 | -webkit-border-radius: 3px;
623 | -moz-border-radius: 3px;
624 | -ms-border-radius: 3px;
625 | -o-border-radius: 3px;
626 | border-radius: 3px;
627 | font-size: 14rem;
628 | top: -3em;
629 | left: 0;
630 | text-align: center; }
631 | .sound-trigger--type-default-2 .sound-trigger__speach:after {
632 | top: 100%;
633 | left: 50%;
634 | border: solid transparent;
635 | content: " ";
636 | height: 0;
637 | width: 0;
638 | position: absolute;
639 | pointer-events: none;
640 | border-top-color: #5b5f7c;
641 | border-width: 4px;
642 | margin-left: -4px; }
643 |
644 | .sound-trigger--type-small.sound-trigger {
645 | display: inline-block;
646 | width: 50px;
647 | height: 50px;
648 | position: relative;
649 | margin: 5px;
650 | -webkit-border-radius: 50px;
651 | -moz-border-radius: 50px;
652 | -ms-border-radius: 50px;
653 | -o-border-radius: 50px;
654 | border-radius: 50px; }
655 | .sound-trigger--type-small.sound-trigger:after {
656 | -webkit-transition: all .3s ease;
657 | -moz-transition: all .3s ease;
658 | -ms-transition: all .3s ease;
659 | -o-transition: all .3s ease;
660 | transition: all .3s ease;
661 | content: '';
662 | position: absolute;
663 | top: 0;
664 | left: 0;
665 | z-index: 48;
666 | width: 100%;
667 | height: 100%;
668 | background-color: rgba(105, 103, 202, 0.2);
669 | -webkit-border-radius: 50px;
670 | -moz-border-radius: 50px;
671 | -ms-border-radius: 50px;
672 | -o-border-radius: 50px;
673 | border-radius: 50px; }
674 | .sound-trigger--type-small.sound-trigger--type-hover:hover:after {
675 | -webkit-transform: scale(1.25);
676 | -moz-transform: scale(1.25);
677 | -ms-transform: scale(1.25);
678 | -o-transform: scale(1.25);
679 | transform: scale(1.25); }
680 | .sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover {
681 | -webkit-transform: scale(0.9);
682 | -moz-transform: scale(0.9);
683 | -ms-transform: scale(0.9);
684 | -o-transform: scale(0.9);
685 | transform: scale(0.9);
686 | background-color: rgba(105, 103, 202, 0.5);
687 | vertical-align: middle; }
688 | .sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover i {
689 | text-shadow: none; }
690 | .sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__inner:hover img {
691 | vertical-align: middle; }
692 | .sound-trigger--type-small.sound-trigger--type-hover .sound-trigger__speach {
693 | -webkit-animation: motion__hover 2s ease 0s infinite alternate;
694 | -moz-animation: motion__hover 2s ease 0s infinite alternate;
695 | -ms-animation: motion__hover 2s ease 0s infinite alternate;
696 | -o-animation: motion__hover 2s ease 0s infinite alternate;
697 | animation: motion__hover 2s ease 0s infinite alternate; }
698 | .sound-trigger--type-small.sound-trigger--type-click:active:after {
699 | -webkit-transform: scale(1.25);
700 | -moz-transform: scale(1.25);
701 | -ms-transform: scale(1.25);
702 | -o-transform: scale(1.25);
703 | transform: scale(1.25); }
704 | .sound-trigger--type-small.sound-trigger--type-click .sound-trigger__inner:active {
705 | -webkit-transform: scale(0.9);
706 | -moz-transform: scale(0.9);
707 | -ms-transform: scale(0.9);
708 | -o-transform: scale(0.9);
709 | transform: scale(0.9);
710 | background-color: rgba(105, 103, 202, 0.5); }
711 | .sound-trigger--type-small.sound-trigger--type-click .sound-trigger__inner:active i {
712 | text-shadow: none; }
713 | .sound-trigger--type-small.sound-trigger--type-click .sound-trigger__speach {
714 | -webkit-animation: motion__click 1s ease 0s infinite;
715 | -moz-animation: motion__click 1s ease 0s infinite;
716 | -ms-animation: motion__click 1s ease 0s infinite;
717 | -o-animation: motion__click 1s ease 0s infinite;
718 | animation: motion__click 1s ease 0s infinite; }
719 | .sound-trigger--type-small .sound-trigger__inner {
720 | width: 100%;
721 | height: 100%;
722 | overflow: hidden;
723 | text-align: center;
724 | -webkit-border-radius: 50px;
725 | -moz-border-radius: 50px;
726 | -ms-border-radius: 50px;
727 | -o-border-radius: 50px;
728 | border-radius: 50px;
729 | -webkit-transition: all .3s ease;
730 | -moz-transition: all .3s ease;
731 | -ms-transition: all .3s ease;
732 | -o-transition: all .3s ease;
733 | transition: all .3s ease;
734 | background-color: #6967ca;
735 | color: #ececf5;
736 | cursor: pointer;
737 | position: relative;
738 | z-index: 50; }
739 | .sound-trigger--type-small .sound-trigger__inner i {
740 | font-size: 20px;
741 | line-height: 50px;
742 | -webkit-transition: all .1s ease;
743 | -moz-transition: all .1s ease;
744 | -ms-transition: all .1s ease;
745 | -o-transition: all .1s ease;
746 | transition: all .1s ease;
747 | text-shadow: 0px 0px 0 #625fc7,1px 1px 0 #625fc7,2px 2px 0 #625fc7,3px 3px 0 #625fc7,4px 4px 0 #625fc7,5px 5px 0 #625fc7,6px 6px 0 #625fc7,7px 7px 0 #625fc7,8px 8px 0 #625fc7,9px 9px 0 #625fc7,10px 10px 0 #625fc7,11px 11px 0 #625fc7,12px 12px 0 #625fc7,13px 13px 0 #625fc7,14px 14px 0 #625fc7,15px 15px 0 #625fc7,16px 16px 0 #625fc7,17px 17px 0 #625fc7,18px 18px 0 #625fc7,19px 19px 0 #625fc7,20px 20px 0 #625fc7,21px 21px 0 #625fc7,22px 22px 0 #625fc7,23px 23px 0 #625fc7,24px 24px 0 #625fc7,25px 25px 0 #625fc7,26px 26px 0 #625fc7,27px 27px 0 #625fc7,28px 28px 0 #625fc7,29px 29px 0 #625fc7,30px 30px 0 #625fc7,31px 31px 0 #625fc7,32px 32px 0 #625fc7,33px 33px 0 #625fc7,34px 34px 0 #625fc7,35px 35px 0 #625fc7,36px 36px 0 #625fc7,37px 37px 0 #625fc7,38px 38px 0 #625fc7,39px 39px 0 #625fc7,40px 40px 0 #625fc7,41px 41px 0 #625fc7,42px 42px 0 #625fc7,43px 43px 0 #625fc7,45px 45px 0 transparent; }
748 | .sound-trigger--type-small .sound-trigger__speach {
749 | position: absolute;
750 | z-index: 60;
751 | width: 100%;
752 | background-color: #5b5f7c;
753 | color: #ececf5;
754 | -webkit-border-radius: 3px;
755 | -moz-border-radius: 3px;
756 | -ms-border-radius: 3px;
757 | -o-border-radius: 3px;
758 | border-radius: 3px;
759 | font-size: 14rem;
760 | top: -3em;
761 | left: 0;
762 | text-align: center; }
763 | .sound-trigger--type-small .sound-trigger__speach:after {
764 | top: 100%;
765 | left: 50%;
766 | border: solid transparent;
767 | content: " ";
768 | height: 0;
769 | width: 0;
770 | position: absolute;
771 | pointer-events: none;
772 | border-top-color: #5b5f7c;
773 | border-width: 4px;
774 | margin-left: -4px; }
775 |
776 | .sound-trigger--type-small-2.sound-trigger {
777 | display: inline-block;
778 | width: 50px;
779 | height: 50px;
780 | position: relative;
781 | margin: 5px;
782 | -webkit-border-radius: 50px;
783 | -moz-border-radius: 50px;
784 | -ms-border-radius: 50px;
785 | -o-border-radius: 50px;
786 | border-radius: 50px; }
787 | .sound-trigger--type-small-2.sound-trigger:after {
788 | -webkit-transition: all .3s ease;
789 | -moz-transition: all .3s ease;
790 | -ms-transition: all .3s ease;
791 | -o-transition: all .3s ease;
792 | transition: all .3s ease;
793 | content: '';
794 | position: absolute;
795 | top: 0;
796 | left: 0;
797 | z-index: 48;
798 | width: 100%;
799 | height: 100%;
800 | background-color: rgba(100, 218, 194, 0.2);
801 | -webkit-border-radius: 50px;
802 | -moz-border-radius: 50px;
803 | -ms-border-radius: 50px;
804 | -o-border-radius: 50px;
805 | border-radius: 50px; }
806 | .sound-trigger--type-small-2.sound-trigger--type-hover:hover:after {
807 | -webkit-transform: scale(1.25);
808 | -moz-transform: scale(1.25);
809 | -ms-transform: scale(1.25);
810 | -o-transform: scale(1.25);
811 | transform: scale(1.25); }
812 | .sound-trigger--type-small-2.sound-trigger--type-hover .sound-trigger__inner:hover {
813 | -webkit-transform: scale(0.9);
814 | -moz-transform: scale(0.9);
815 | -ms-transform: scale(0.9);
816 | -o-transform: scale(0.9);
817 | transform: scale(0.9);
818 | background-color: rgba(100, 218, 194, 0.5);
819 | vertical-align: middle; }
820 | .sound-trigger--type-small-2.sound-trigger--type-hover .sound-trigger__inner:hover i {
821 | text-shadow: none; }
822 | .sound-trigger--type-small-2.sound-trigger--type-hover .sound-trigger__inner:hover img {
823 | vertical-align: middle; }
824 | .sound-trigger--type-small-2.sound-trigger--type-hover .sound-trigger__speach {
825 | -webkit-animation: motion__hover 2s ease 0s infinite alternate;
826 | -moz-animation: motion__hover 2s ease 0s infinite alternate;
827 | -ms-animation: motion__hover 2s ease 0s infinite alternate;
828 | -o-animation: motion__hover 2s ease 0s infinite alternate;
829 | animation: motion__hover 2s ease 0s infinite alternate; }
830 | .sound-trigger--type-small-2.sound-trigger--type-click:active:after {
831 | -webkit-transform: scale(1.25);
832 | -moz-transform: scale(1.25);
833 | -ms-transform: scale(1.25);
834 | -o-transform: scale(1.25);
835 | transform: scale(1.25); }
836 | .sound-trigger--type-small-2.sound-trigger--type-click .sound-trigger__inner:active {
837 | -webkit-transform: scale(0.9);
838 | -moz-transform: scale(0.9);
839 | -ms-transform: scale(0.9);
840 | -o-transform: scale(0.9);
841 | transform: scale(0.9);
842 | background-color: rgba(100, 218, 194, 0.5); }
843 | .sound-trigger--type-small-2.sound-trigger--type-click .sound-trigger__inner:active i {
844 | text-shadow: none; }
845 | .sound-trigger--type-small-2.sound-trigger--type-click .sound-trigger__speach {
846 | -webkit-animation: motion__click 1s ease 0s infinite;
847 | -moz-animation: motion__click 1s ease 0s infinite;
848 | -ms-animation: motion__click 1s ease 0s infinite;
849 | -o-animation: motion__click 1s ease 0s infinite;
850 | animation: motion__click 1s ease 0s infinite; }
851 | .sound-trigger--type-small-2 .sound-trigger__inner {
852 | width: 100%;
853 | height: 100%;
854 | overflow: hidden;
855 | text-align: center;
856 | -webkit-border-radius: 50px;
857 | -moz-border-radius: 50px;
858 | -ms-border-radius: 50px;
859 | -o-border-radius: 50px;
860 | border-radius: 50px;
861 | -webkit-transition: all .3s ease;
862 | -moz-transition: all .3s ease;
863 | -ms-transition: all .3s ease;
864 | -o-transition: all .3s ease;
865 | transition: all .3s ease;
866 | background-color: #64dac2;
867 | color: #ececf5;
868 | cursor: pointer;
869 | position: relative;
870 | z-index: 50; }
871 | .sound-trigger--type-small-2 .sound-trigger__inner i {
872 | font-size: 20px;
873 | line-height: 50px;
874 | -webkit-transition: all .1s ease;
875 | -moz-transition: all .1s ease;
876 | -ms-transition: all .1s ease;
877 | -o-transition: all .1s ease;
878 | transition: all .1s ease;
879 | text-shadow: 0px 0px 0 #5cd8bf,1px 1px 0 #5cd8bf,2px 2px 0 #5cd8bf,3px 3px 0 #5cd8bf,4px 4px 0 #5cd8bf,5px 5px 0 #5cd8bf,6px 6px 0 #5cd8bf,7px 7px 0 #5cd8bf,8px 8px 0 #5cd8bf,9px 9px 0 #5cd8bf,10px 10px 0 #5cd8bf,11px 11px 0 #5cd8bf,12px 12px 0 #5cd8bf,13px 13px 0 #5cd8bf,14px 14px 0 #5cd8bf,15px 15px 0 #5cd8bf,16px 16px 0 #5cd8bf,17px 17px 0 #5cd8bf,18px 18px 0 #5cd8bf,19px 19px 0 #5cd8bf,20px 20px 0 #5cd8bf,21px 21px 0 #5cd8bf,22px 22px 0 #5cd8bf,23px 23px 0 #5cd8bf,24px 24px 0 #5cd8bf,25px 25px 0 #5cd8bf,26px 26px 0 #5cd8bf,27px 27px 0 #5cd8bf,28px 28px 0 #5cd8bf,29px 29px 0 #5cd8bf,30px 30px 0 #5cd8bf,31px 31px 0 #5cd8bf,32px 32px 0 #5cd8bf,33px 33px 0 #5cd8bf,34px 34px 0 #5cd8bf,35px 35px 0 #5cd8bf,36px 36px 0 #5cd8bf,37px 37px 0 #5cd8bf,38px 38px 0 #5cd8bf,39px 39px 0 #5cd8bf,40px 40px 0 #5cd8bf,41px 41px 0 #5cd8bf,42px 42px 0 #5cd8bf,43px 43px 0 #5cd8bf,45px 45px 0 transparent; }
880 | .sound-trigger--type-small-2 .sound-trigger__speach {
881 | position: absolute;
882 | z-index: 60;
883 | width: 100%;
884 | background-color: #5b5f7c;
885 | color: #ececf5;
886 | -webkit-border-radius: 3px;
887 | -moz-border-radius: 3px;
888 | -ms-border-radius: 3px;
889 | -o-border-radius: 3px;
890 | border-radius: 3px;
891 | font-size: 14rem;
892 | top: -3em;
893 | left: 0;
894 | text-align: center; }
895 | .sound-trigger--type-small-2 .sound-trigger__speach:after {
896 | top: 100%;
897 | left: 50%;
898 | border: solid transparent;
899 | content: " ";
900 | height: 0;
901 | width: 0;
902 | position: absolute;
903 | pointer-events: none;
904 | border-top-color: #5b5f7c;
905 | border-width: 4px;
906 | margin-left: -4px; }
907 |
908 | @-webkit-keyframes motion__hover {
909 | 0% {
910 | -webkit-transform: translateY(0);
911 | transform: translateY(0); }
912 | 100% {
913 | -webkit-transform: translateY(10px);
914 | transform: translateY(10px); } }
915 | @keyframes motion__hover {
916 | 0% {
917 | -webkit-transform: translateY(0);
918 | -ms-transform: translateY(0);
919 | transform: translateY(0); }
920 | 100% {
921 | -webkit-transform: translateY(10px);
922 | -ms-transform: translateY(10px);
923 | transform: translateY(10px); } }
924 | @-webkit-keyframes motion__click {
925 | 0% {
926 | -webkit-transform: translateY(5px);
927 | transform: translateY(5px); }
928 | 10% {
929 | -webkit-transform: translateY(10px);
930 | transform: translateY(10px); }
931 | 50% {
932 | -webkit-transform: translateY(10px);
933 | transform: translateY(10px); }
934 | 100% {
935 | -webkit-transform: translateY(5px);
936 | transform: translateY(5px); } }
937 | @keyframes motion__click {
938 | 0% {
939 | -webkit-transform: translateY(5px);
940 | -ms-transform: translateY(5px);
941 | transform: translateY(5px); }
942 | 10% {
943 | -webkit-transform: translateY(10px);
944 | -ms-transform: translateY(10px);
945 | transform: translateY(10px); }
946 | 50% {
947 | -webkit-transform: translateY(10px);
948 | -ms-transform: translateY(10px);
949 | transform: translateY(10px); }
950 | 100% {
951 | -webkit-transform: translateY(5px);
952 | -ms-transform: translateY(5px);
953 | transform: translateY(5px); } }
954 | .swipe-example {
955 | -webkit-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
956 | -moz-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
957 | -ms-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
958 | -o-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
959 | animation: motion__swipe-l-r 3s ease-in-out 0s infinite; }
960 | .swipe-example__child {
961 | line-height: 1;
962 | font-size: 40rem; }
963 | .swipe-example__child i {
964 | -webkit-transform: rotate(45deg);
965 | -moz-transform: rotate(45deg);
966 | -ms-transform: rotate(45deg);
967 | -o-transform: rotate(45deg);
968 | transform: rotate(45deg); }
969 |
970 | @-webkit-keyframes motion__swipe-l-r {
971 | 0% {
972 | opacity: 0;
973 | -webkit-transform: translateX(0);
974 | transform: translateX(0); }
975 | 50% {
976 | opacity: 1; }
977 | 100% {
978 | opacity: 0;
979 | -webkit-transform: translateX(100%);
980 | transform: translateX(100%); } }
981 | @keyframes motion__swipe-l-r {
982 | 0% {
983 | opacity: 0;
984 | -webkit-transform: translateX(0);
985 | -ms-transform: translateX(0);
986 | transform: translateX(0); }
987 | 50% {
988 | opacity: 1; }
989 | 100% {
990 | opacity: 0;
991 | -webkit-transform: translateX(100%);
992 | -ms-transform: translateX(100%);
993 | transform: translateX(100%); } }
994 | .footer {
995 | text-align: center;
996 | padding: 4em 1em;
997 | color: #adb0c3; }
998 | .footer__btn-top {
999 | padding: 0 40px 40px 40px;
1000 | float: right;
1001 | background-color: transparent;
1002 | color: #5b5f7c; }
1003 | .footer__btn-top:hover {
1004 | color: #5b5f7c;
1005 | background-color: transparent;
1006 | -webkit-transform: scale(2);
1007 | -moz-transform: scale(2);
1008 | -ms-transform: scale(2);
1009 | -o-transform: scale(2);
1010 | transform: scale(2); }
1011 |
1012 | #easyaudioeffects .syntaxhighlighter {
1013 | -webkit-border-radius: 4px;
1014 | -moz-border-radius: 4px;
1015 | -ms-border-radius: 4px;
1016 | -o-border-radius: 4px;
1017 | border-radius: 4px;
1018 | font-size: 18rem !important;
1019 | background-color: #45485f !important; }
1020 | #easyaudioeffects .syntaxhighlighter .toolbar {
1021 | display: none; }
1022 | #easyaudioeffects .syntaxhighlighter * {
1023 | font-size: 18rem !important; }
1024 | #easyaudioeffects .syntaxhighlighter .gutter {
1025 | background-color: #45485f !important; }
1026 | #easyaudioeffects .syntaxhighlighter .gutter .line {
1027 | border-right: 3px solid #45485f !important; }
1028 | #easyaudioeffects .syntaxhighlighter .gutter .line.alt1 {
1029 | background-color: rgba(0, 0, 0, 0.2) !important; }
1030 | #easyaudioeffects .syntaxhighlighter .gutter .line.alt2 {
1031 | background-color: rgba(0, 0, 0, 0.1) !important; }
1032 | #easyaudioeffects .syntaxhighlighter .gutter .line.highlighted {
1033 | border-right: 3px solid #a9a9d2 !important; }
1034 | #easyaudioeffects .syntaxhighlighter .gutter .line.highlighted.alt1,
1035 | #easyaudioeffects .syntaxhighlighter .gutter .line.highlighted.alt2 {
1036 | color: #ececf5 !important;
1037 | background-color: #5b5f7c !important; }
1038 | #easyaudioeffects .syntaxhighlighter .code {
1039 | background-color: #45485f !important; }
1040 | #easyaudioeffects .syntaxhighlighter .code .container {
1041 | background-color: #45485f !important; }
1042 | #easyaudioeffects .syntaxhighlighter .code .container .line.alt1 {
1043 | background-color: rgba(0, 0, 0, 0.2) !important; }
1044 | #easyaudioeffects .syntaxhighlighter .code .container .line.alt2 {
1045 | background-color: rgba(0, 0, 0, 0.1) !important; }
1046 | #easyaudioeffects .syntaxhighlighter .code .container .line.highlighted.alt1,
1047 | #easyaudioeffects .syntaxhighlighter .code .container .line.highlighted.alt2 {
1048 | background-color: #5b5f7c !important; }
1049 | #easyaudioeffects .syntaxhighlighter .string,
1050 | #easyaudioeffects .syntaxhighlighter .string a {
1051 | color: #64dac2 !important; }
1052 |
--------------------------------------------------------------------------------
/demo/images/cat.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/demo/images/ogp-img.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rm-labo/easyaudioeffects/cd48102db2cda20590223fe0c818ae8925c2eef7/demo/images/ogp-img.png
--------------------------------------------------------------------------------
/demo/images/playtype.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rm-labo/easyaudioeffects/cd48102db2cda20590223fe0c818ae8925c2eef7/demo/images/playtype.png
--------------------------------------------------------------------------------
/demo/js/demo.js:
--------------------------------------------------------------------------------
1 | $(function() {
2 | //------
3 | SyntaxHighlighter.all();
4 |
5 | //------
6 | $('body').addClass('loaded');
7 |
8 | //------
9 | var ankerOffset = $('#nav').height();
10 | var pagetopID = "#pagetop";
11 | var hashOffset;
12 | $('a[href^=#], area[href^=#]').not('a[href=#], area[href=#]').click(function(){
13 | if($(this).attr("href") == pagetopID){
14 | hashOffset = 0 ;
15 | }else{
16 | var hash = this.hash;
17 | hashOffset = $(hash).offset().top ;
18 | hashOffset = hashOffset - ankerOffset;
19 | }
20 | $("html,body").stop().animate({
21 | scrollTop: hashOffset
22 | }, 1000 , "easeOutQuart");
23 |
24 | return false;
25 | });
26 |
27 | //------
28 | var HEADER_H = $('#main-visual').height();
29 | $(window).bind("resize load scroll",function(){
30 | scrollUi();
31 | });
32 | function scrollUi(){
33 | var scrolled = $(window).scrollTop();
34 | switch_pos = HEADER_H;
35 | if( switch_pos <= scrolled ){
36 | console.log('test');
37 | $('body').addClass('js-switch');
38 | } else {
39 | $('body').removeClass('js-switch');
40 | }
41 | }
42 |
43 | draw();
44 |
45 | });
46 |
47 | window.requestAnimFrame = (function(callback){
48 | return window.requestAnimationFrame ||
49 | window.webkitRequestAnimationFrame ||
50 | window.mozRequestAnimationFrame ||
51 | window.oRequestAnimationFrame ||
52 | window.msRequestAnimationFrame ||
53 | function(callback){
54 | window.setTimeout(callback, 1000 / 60);
55 | };
56 | return function(callback){
57 | window.setTimeout(callback, 1000 / 36);
58 | };
59 | })();
60 |
61 | var canvas, ctx, time;
62 | var circles = [];
63 | var max = 80;
64 | canvas = document.getElementById("c");
65 | ctx = canvas.getContext("2d");
66 |
67 | function getRandomArbitrary (min, max) {
68 | return Math.random() * (max - min) + min;
69 | }
70 | function getRandomInt (min, max) {
71 | return Math.floor(Math.random() * (max - min + 1)) + min;
72 | }
73 |
74 | var circle = {
75 | x: 0,
76 | y: Math.sin(this.x*Math.PI/180),
77 | }
78 |
79 | var createCircles = function(){
80 | var randCol = "rgba("+getRandomInt(70, 150)+","+getRandomInt(70, 150)+","+getRandomInt(190, 200)+" ,.5)";
81 | var randA = getRandomArbitrary(10,210);
82 | var radius = getRandomInt(6,40);
83 | var x = getRandomInt(0, canvas.width);
84 | if(circles.length < max){
85 | circles.push({
86 | x: x,
87 | y: circle.y,
88 | r: radius,
89 | c: randCol,
90 | a: randA
91 | });
92 | }
93 | }
94 | var updateCircles = function(){
95 | var i = circles.length;
96 | while(i--){
97 | var c = circles[i];
98 | c.y = Math.sin(c.x*Math.PI/180);
99 | if(c.y >= 0){
100 | c.y = canvas.height/2 - (c.y-0) * c.a;
101 | }
102 | if(c.y < 0){
103 | c.y = canvas.height/2 + (0 - c.y) * c.a;
104 | }
105 | c.x++;
106 | if(c.x > canvas.width-30){
107 | circles.splice(i, 1);
108 | }
109 | }
110 | }
111 | var renderCircles = function(){
112 | var i = circles.length;
113 | while(i--){
114 | var c = circles[i];
115 | ctx.beginPath();
116 | ctx.arc(c.x,c.y, c.r, 0, Math.PI*2, true);
117 | ctx.closePath();
118 | ctx.fillStyle = c.c;
119 | ctx.shadowBlur = 20;
120 | ctx.shadowColor = c.c;
121 | ctx.fill();
122 | }
123 | }
124 | function draw(){
125 | ctx.globalCompositeOperation = "xor";
126 | ctx.clearRect(0,0,canvas.width, canvas.height);
127 | ctx.globalCompositeOperation = 'lighter';
128 | //Call our super awesome animation method, because setTimeout is for suckers
129 | requestAnimFrame(draw);
130 | var now = new Date().getTime();
131 | //var dt = now - (time || now);
132 | time = now;
133 | createCircles();
134 | updateCircles();
135 | renderCircles();
136 | }
137 |
138 |
139 |
--------------------------------------------------------------------------------
/demo/js/demo.min.js:
--------------------------------------------------------------------------------
1 | function getRandomArbitrary(t,e){return Math.random()*(e-t)+t}function getRandomInt(t,e){return Math.floor(Math.random()*(e-t+1))+t}function draw(){ctx.globalCompositeOperation="xor",ctx.clearRect(0,0,canvas.width,canvas.height),ctx.globalCompositeOperation="lighter",requestAnimFrame(draw);var t=(new Date).getTime();time=t,createCircles(),updateCircles(),renderCircles()}$(function(){function t(){var t=$(window).scrollTop();switch_pos=i,switch_pos<=t?(console.log("test"),$("body").addClass("js-switch")):$("body").removeClass("js-switch")}SyntaxHighlighter.all(),$("body").addClass("loaded");var e=$("#nav").height(),a="#pagetop",n;$("a[href^=#], area[href^=#]").not("a[href=#], area[href=#]").click(function(){if($(this).attr("href")==a)n=0;else{var t=this.hash;n=$(t).offset().top,n-=e}return $("html,body").stop().animate({scrollTop:n},1e3,"easeOutQuart"),!1});var i=$("#main-visual").height();$(window).bind("resize load scroll",function(){t()}),draw()}),window.requestAnimFrame=function(t){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(t){window.setTimeout(t,1e3/60)};return function(t){window.setTimeout(t,1e3/36)}}();var canvas,ctx,time,circles=[],max=80;canvas=document.getElementById("c"),ctx=canvas.getContext("2d");var circle={x:0,y:Math.sin(this.x*Math.PI/180)},createCircles=function(){var t="rgba("+getRandomInt(70,150)+","+getRandomInt(70,150)+","+getRandomInt(190,200)+" ,.5)",e=getRandomArbitrary(10,210),a=getRandomInt(6,40),n=getRandomInt(0,canvas.width);circles.length
=0&&(e.y=canvas.height/2-(e.y-0)*e.a),e.y<0&&(e.y=canvas.height/2+(0-e.y)*e.a),e.x++,e.x>canvas.width-30&&circles.splice(t,1)}},renderCircles=function(){for(var t=circles.length;t--;){var e=circles[t];ctx.beginPath(),ctx.arc(e.x,e.y,e.r,0,2*Math.PI,!0),ctx.closePath(),ctx.fillStyle=e.c,ctx.shadowBlur=20,ctx.shadowColor=e.c,ctx.fill()}};
--------------------------------------------------------------------------------
/demo/scss/demo.scss:
--------------------------------------------------------------------------------
1 | // setting mixins
2 | //----------------------------------------------------------------
3 | $color-key : #6967ca;
4 | $color-key-sub : #64dac2;
5 |
6 | $color-text : #5b5f7c;
7 | $color-text-sub : lighten( $color-text , 30%);
8 | $color-white : #f6f7fb;
9 | $color-white : #ececf5;
10 |
11 | $color-border : lighten( $color-text , 45%);
12 | $color-error : #da6490;
13 |
14 | $bp-1 : 900px;
15 |
16 |
17 | @mixin clearfix {
18 | zoom: 1;
19 | &:before,
20 | &:after {
21 | display: block;
22 | height: 0;
23 | visibility: hidden;
24 | content: "\0020";
25 | }
26 | &:after {
27 | clear: both;
28 | }
29 | }
30 |
31 | @mixin gradient-v ( $top , $bottom ){
32 | background: $top; /* Old browsers */
33 | background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */
34 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom)); /* Chrome,Safari4+ */
35 | background: -webkit-linear-gradient(top, $top 0%,$bottom 100%); /* Chrome10+,Safari5.1+ */
36 | background: -o-linear-gradient(top, $top 0%,$bottom 100%); /* Opera 11.10+ */
37 | background: -ms-linear-gradient(top, $top 0%,$bottom 100%); /* IE10+ */
38 | background: linear-gradient(to bottom, $top 0%,$bottom 100%); /* W3C */
39 | }
40 |
41 |
42 | @mixin transition($transition-property : all, $transition-time : .3s, $method : ease) {
43 | -webkit-transition: $transition-property $transition-time $method;
44 | -moz-transition: $transition-property $transition-time $method;
45 | -ms-transition: $transition-property $transition-time $method;
46 | -o-transition: $transition-property $transition-time $method;
47 | transition: $transition-property $transition-time $method;
48 | }
49 |
50 | @mixin long-shadow($type, $color, $length, $fadeout: true, $skew: false, $direction: right){
51 | $shadow: '';
52 | @if $skew == false or $type == text{
53 | @if $direction == right {
54 | @for $i from 0 to $length - 1 {
55 | $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $color + ',';
56 | }
57 | }
58 | @if $direction == left {
59 | @for $i from 0 to $length - 1 {
60 | $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $color + ',';
61 | }
62 | }
63 | }
64 |
65 | @if $fadeout == true{
66 | @for $i from 1 to $length - 1 {
67 | @if $type == text or $skew == false{
68 | @if $direction == right{
69 | $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + rgba($color, 1 - $i / $length) + ',';
70 | }
71 | @if $direction == left{
72 | $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + rgba($color, 1 - $i / $length) + ',';
73 | }
74 | }
75 | @if ($type == box) and $skew == true{
76 | @if $direction == right {
77 | $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
78 | }
79 | @if $direction == left {
80 | $shadow: $shadow + $i * -1 + 'px ' + $i + 'px 0 ' + $i * .2 + 'px ' + rgba($color, 1 - $i / $length) + ',';
81 | }
82 | }
83 | }
84 | $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba($color, 0);
85 | }
86 | @if $fadeout == false{
87 | @if $skew == true and ( $type == box ){
88 | @for $i from 0 to $length - 1 {
89 | $shadow: $shadow + $i + 'px ' + $i + 'px 0 ' + $i * .1 + 'px ' + $color + ',';
90 | }
91 | }
92 | $shadow: $shadow + $length + 'px ' + $length + 'px 0 ' + rgba(0,0,0,0);
93 | }
94 | $shadow: unquote($shadow);
95 | @if $type == 'box' {box-shadow: $shadow;}
96 | @if $type == 'text' {text-shadow: $shadow;}
97 | }
98 |
99 |
100 | //helper
101 | //----------------------------------------------------------------
102 |
103 | .left { text-align: left;}
104 | .right { text-align: right;}
105 | .center { text-align: center;}
106 |
107 | .sep{
108 | border-top: 1px solid $color-border;
109 | //margin: 10px 0;
110 | }
111 |
112 | //reset
113 | //----------------------------------------------------------------
114 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
115 | margin: 0;
116 | padding: 0;
117 | border: 0;
118 | font-size: 100%;
119 | font: inherit;
120 | vertical-align: baseline; }
121 |
122 | /* HTML5 display-role reset for older browsers */
123 |
124 | article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
125 | display: block; }
126 |
127 | body {
128 | line-height: 1; }
129 |
130 | ol, ul {
131 | list-style: none; }
132 |
133 | blockquote, q {
134 | quotes: none; }
135 |
136 | blockquote {
137 | &:before, &:after {
138 | content: '';
139 | content: none; } }
140 |
141 | q {
142 | &:before, &:after {
143 | content: '';
144 | content: none; } }
145 |
146 | table {
147 | border-collapse: collapse;
148 | border-spacing: 0; }
149 |
150 |
151 | // bass
152 | //----------------------------------------------------------------
153 | html{
154 | //font-family: 'Titillium Web', sans-serif;
155 | font-family: 'Lato';
156 | font-size: 6.25%;
157 | }
158 | body{
159 | background-color: $color-white;
160 | font-size: 18rem; /*13px*/
161 | line-height: 1.6;
162 | color: $color-text;
163 | -webkit-font-smoothing: subpixel-antialiased;
164 | -moz-osx-font-smoothing: auto;
165 | overflow-x: hidden;
166 | }
167 |
168 |
169 | a{
170 | color: $color-key-sub;
171 | text-decoration: none;
172 | -webkit-transition: all .3s ease;
173 | -moz-transition: all .3s ease;
174 | -ms-transition: all .3s ease;
175 | -o-transition: all .3s ease;
176 | transition: all .3s ease;
177 | &:hover{ background-color: $color-key-sub; color: $color-white;}
178 | &:hover{}
179 | }
180 |
181 |
182 | //style
183 | //----------------------------------------------------------------
184 | pre{
185 | //padding: 20px;
186 | //background-color: blue;
187 | font-size: 18rem;
188 | }
189 |
190 | strong{
191 | font-weight: bold;
192 | //color: $color-key-sub;
193 | }
194 |
195 | .text-sub{
196 | color: $color-text-sub;
197 | }
198 | .note{
199 | padding: 0.1em 0.5em;
200 | margin : 0.5em 0;
201 | color : $color-error;
202 | background-color: lighten($color-error , 30%);
203 | }
204 |
205 | .info{
206 | background-color: white;
207 | padding: 0.1em 0.5em;
208 | margin : 0.5em 0;
209 | color : $color-error;
210 | }
211 |
212 | .table-basic{
213 | font-size: 14rem;
214 | text-align: center;
215 | border-left: 2px solid $color-white;
216 | border-top: 2px solid $color-white;
217 | tr{
218 | th{
219 | border-right: 2px solid $color-white;
220 | border-bottom: 2px solid $color-white;
221 | padding: 0.5em 1em;
222 | }
223 | td{
224 | border-right: 2px solid $color-white;
225 | border-bottom: 2px solid $color-white;
226 | padding: 0.5em 1em;
227 | }
228 | }
229 | thead{
230 | tr{
231 | background-color: rgba( $color-text , 1);
232 | color : $color-white;
233 | th{}
234 | td{}
235 | }
236 | }
237 | tbody{
238 | tr{
239 | background-color: rgba( white , .5);
240 | th{
241 | background-color: rgba( $color-text , .08);
242 | }
243 | td{}
244 | }
245 | }
246 | }
247 |
248 | .nav{
249 | position: fixed;
250 | z-index: 9999;
251 | width: 100%;
252 | font-size: 20rem;
253 | font-weight: 300;
254 | top: 0;
255 | left: 0;
256 | -webkit-transition: all .3s ease;
257 | -moz-transition: all .3s ease;
258 | -ms-transition: all .3s ease;
259 | -o-transition: all .3s ease;
260 | transition: all .3s ease;
261 | &__nav-list{
262 | padding: 1em;
263 | text-align: center;
264 | &__item{
265 | display: inline-block;
266 | &__hit{
267 | display: block;
268 | color: white;
269 | padding: 0.4em 1em;
270 | text-decoration: none;
271 | &:hover{
272 | color: $color-white;
273 | }
274 |
275 | }
276 | }
277 | }
278 | //background-color: rgba( black , .2);
279 |
280 | .js-switch &{
281 | background-color: rgba($color-white , .9);
282 | &__nav-list{
283 | &__item{
284 | &__hit{
285 | color:$color-text;
286 | &:hover{
287 | color: $color-white;
288 | }
289 | }
290 | }
291 | }
292 | }
293 | }
294 |
295 | .wrapper{
296 | max-width: 680px;
297 | padding: 0 20px;
298 | margin: 20px auto;
299 | text-align: left;
300 | }
301 |
302 | .section{
303 | padding: 40px 10px;
304 | z-index: 2;
305 | position: relative;
306 |
307 | &__title{
308 | text-align: center;
309 | font-size: 80rem;
310 | font-weight: 100;
311 | line-height: 1.2;
312 | }
313 |
314 | &__text{
315 | margin-bottom: 1em;
316 | }
317 | }
318 |
319 | body .section:nth-child(2n){
320 | background-color: darken($color-white , 2%);
321 |
322 | }
323 |
324 | .sub-section{
325 | padding: 0 0 20px 0;
326 | z-index: 2;
327 | text-align: center;
328 | position: relative;
329 |
330 | &__title{
331 | text-align: center;
332 | font-size: 30rem;
333 | margin: 1em 0;
334 | }
335 |
336 | &__sub-title{
337 | text-align: left;
338 | font-size: 26rem;
339 | margin: 1em 0;
340 | }
341 |
342 | &__text{
343 | margin-bottom: 1em;
344 | }
345 | }
346 |
347 | .section--main{
348 | overflow: hidden;
349 | text-align: center;
350 | @include gradient-v ( #3f227e , #375e99); //#4e4586
351 | padding: 10em 0 3em 0;
352 | background-color: black;
353 | color: $color-white;
354 | border-bottom: none;
355 |
356 | &__title{
357 | position: relative;
358 | z-index: 10;
359 | font-size: 80rem;
360 | font-weight: 100;
361 | letter-spacing: 0.2em;
362 | margin-bottom: 0.2em;
363 | @include transition(all, 4s, ease-out );
364 | letter-spacing: 0;
365 | text-shadow: 1px 1px 10px rgba( $color-key , .8);
366 | letter-spacing: 0.1em;
367 | -webkit-transform: scale(.8);
368 | -moz-transform: scale(.8);
369 | -ms-transform: scale(.8);
370 | -o-transform: scale(.8);
371 | transform: scale(.8);
372 | .loaded &{
373 | letter-spacing: 0.1em;
374 | -webkit-transform: scale(1);
375 | -moz-transform: scale(1);
376 | -ms-transform: scale(1);
377 | -o-transform: scale(1);
378 | transform: scale(1);
379 | }
380 | }
381 |
382 | &__ver{
383 | position: relative;
384 | z-index: 10;
385 | font-size: 14rem;
386 | margin: 1em;
387 | font-weight: 200;
388 |
389 | }
390 | &__caption{
391 | position: relative;
392 | z-index: 10;
393 | margin: 0.5em;
394 | font-size: 26rem;
395 | font-weight: 300;
396 | letter-spacing: 0.02em;
397 | color: $color-key-sub;
398 | }
399 | &__btn{
400 | position: relative;
401 | z-index: 10;
402 | margin-top: 20px;
403 | display: inline-block;
404 | padding: 0.8em 1.5em;
405 | border: 2px solid rgba($color-border , .3);
406 | font-size: 24rem;
407 | font-weight: 300;
408 | text-decoration: none;
409 | color: $color-white;
410 | @include transition(all, .2s, ease );
411 | span{
412 | vertical-align: top;
413 | }
414 | small{
415 |
416 | font-size: 18rem;
417 | }
418 | i{
419 | padding-right: 0.2em;
420 | }
421 |
422 | &:hover{
423 | background-color: rgba( $color-key ,.9);
424 | border: 2px solid rgba($color-key , 1);
425 | }
426 | }
427 | &__canvas{
428 | position: absolute;
429 | z-index: 3;
430 | top: 0;
431 | left: 50%;
432 | //width: 2000px;
433 | //height: 100%;
434 | margin: 0 0 0 -1000px;
435 | }
436 |
437 | &__waveform{
438 | opacity: 0;
439 | width: 150%;
440 | height: 500px;
441 | max-height: 500px;
442 | position: absolute;
443 | z-index: 2;
444 | top: 0;
445 | left: -25%;
446 | @include transition(all, 4s, ease );
447 | .loaded &{
448 | opacity: 1;
449 | }
450 | .waveform {
451 | width: 100%;
452 | height: 100%;
453 | fill: none;
454 | stroke-width: .07;
455 | }
456 | .blue { stroke: rgba(100, 104, 255, 0.3);}
457 | .red { stroke: rgba(100, 68, 150, 0.3);}
458 | .green { stroke: rgba(100, 155, 102, 0.3);}
459 | }
460 |
461 | &:before{
462 | content:'';
463 | position: absolute;
464 | @include gradient-v ( #3f227e , #375e99); //#4e4586
465 | opacity: 0.5;
466 | bottom: -200%;
467 | left: 0;
468 | width: 50%;
469 | height: 200%;
470 | z-index: 1;
471 | -webkit-transform-origin: right top;
472 | -moz-transform-origin: right top;
473 | -ms-transform-origin: right top;
474 | -o-transform-origin: right top;
475 | transform-origin: right top;
476 | -webkit-transform: skewY(45deg) ;
477 | -moz-transform: skewY(45deg) ;
478 | -ms-transform: skewY(45deg) ;
479 | -o-transform: skewY(45deg) ;
480 | transform: skewY(45deg) ;
481 | }
482 | &:after{
483 | content:'';
484 | position: absolute;
485 | @include gradient-v ( #375e99 , #3f227e); //#4e4586
486 | opacity: 0.5;
487 | bottom: -200%;
488 | right: 0;
489 | width: 50%;
490 | height: 200%;
491 | z-index: 1;
492 | -webkit-transform-origin: left top;
493 | -moz-transform-origin: left top;
494 | -ms-transform-origin: left top;
495 | -o-transform-origin: left top;
496 | transform-origin: left top;
497 | -webkit-transform: skewY(-45deg) ;
498 | -moz-transform: skewY(-45deg) ;
499 | -ms-transform: skewY(-45deg) ;
500 | -o-transform: skewY(-45deg) ;
501 | transform: skewY(-45deg) ;
502 | }
503 |
504 | @media screen and (max-width: 900px) {
505 | &__title{
506 | @include transition(all, 0s, ease-out );
507 | font-size: 40rem;
508 | }
509 | &__caption{
510 | font-size: 16rem;
511 | }
512 | }
513 | }
514 |
515 |
516 | @mixin sound-trigger ( $size , $color ){
517 | &.sound-trigger{
518 | display: inline-block;
519 | width: $size;
520 | height: $size;
521 | position: relative;
522 | margin: $size/10;
523 |
524 | -webkit-border-radius: $size;
525 | -moz-border-radius: $size;
526 | -ms-border-radius: $size;
527 | -o-border-radius: $size;
528 | border-radius: $size;
529 | &:after{
530 | -webkit-transition: all .3s ease;
531 | -moz-transition: all .3s ease;
532 | -ms-transition: all .3s ease;
533 | -o-transition: all .3s ease;
534 | transition: all .3s ease;
535 | content : '';
536 | position: absolute;
537 | top: 0;
538 | left: 0;
539 | z-index: 48;
540 | width: 100%;
541 | height: 100%;
542 | background-color: rgba( $color , 0.2);
543 | -webkit-border-radius: $size;
544 | -moz-border-radius: $size;
545 | -ms-border-radius: $size;
546 | -o-border-radius: $size;
547 | border-radius: $size;
548 | }
549 |
550 | }
551 | &.sound-trigger--type-hover{
552 | &:hover{
553 | &:after{
554 | -webkit-transform: scale(1.25);
555 | -moz-transform: scale(1.25);
556 | -ms-transform: scale(1.25);
557 | -o-transform: scale(1.25);
558 | transform: scale(1.25);
559 | }
560 | }
561 | .sound-trigger__inner{
562 | &:hover{
563 | -webkit-transform: scale(.9);
564 | -moz-transform: scale(.9);
565 | -ms-transform: scale(.9);
566 | -o-transform: scale(.9);
567 | transform: scale(.9);
568 | background-color: rgba($color , .5);
569 | vertical-align: middle;
570 | i{
571 | text-shadow : none;
572 | }
573 | img{
574 | vertical-align: middle;
575 | }
576 | }
577 | }
578 | .sound-trigger__speach{
579 | -webkit-animation: motion__hover 2s ease 0s infinite alternate;
580 | -moz-animation: motion__hover 2s ease 0s infinite alternate;
581 | -ms-animation: motion__hover 2s ease 0s infinite alternate;
582 | -o-animation: motion__hover 2s ease 0s infinite alternate;
583 | animation: motion__hover 2s ease 0s infinite alternate;
584 | }
585 | }
586 | &.sound-trigger--type-click{
587 | &:active{
588 | &:after{
589 | -webkit-transform: scale(1.25);
590 | -moz-transform: scale(1.25);
591 | -ms-transform: scale(1.25);
592 | -o-transform: scale(1.25);
593 | transform: scale(1.25);
594 | }
595 | }
596 | .sound-trigger__inner{
597 | &:active{
598 | -webkit-transform: scale(.9);
599 | -moz-transform: scale(.9);
600 | -ms-transform: scale(.9);
601 | -o-transform: scale(.9);
602 | transform: scale(.9);
603 | background-color: rgba($color , .5);
604 | i{
605 | text-shadow : none;
606 | }
607 | }
608 | }
609 | .sound-trigger__speach{
610 | -webkit-animation: motion__click 1s ease 0s infinite;
611 | -moz-animation: motion__click 1s ease 0s infinite;
612 | -ms-animation: motion__click 1s ease 0s infinite;
613 | -o-animation: motion__click 1s ease 0s infinite;
614 | animation: motion__click 1s ease 0s infinite;
615 | }
616 | }
617 |
618 | .sound-trigger__inner{
619 | width: 100%;
620 | height: 100%;
621 | overflow: hidden;
622 | text-align: center;
623 | -webkit-border-radius: $size;
624 | -moz-border-radius: $size;
625 | -ms-border-radius: $size;
626 | -o-border-radius: $size;
627 | border-radius: $size;
628 | -webkit-transition: all .3s ease;
629 | -moz-transition: all .3s ease;
630 | -ms-transition: all .3s ease;
631 | -o-transition: all .3s ease;
632 | transition: all .3s ease;
633 | background-color: $color;
634 | color: $color-white;
635 | cursor: pointer;
636 | position: relative;
637 | z-index: 50;
638 |
639 | i{
640 | font-size: 0.4 * $size;
641 | line-height: $size;
642 | -webkit-transition: all .1s ease;
643 | -moz-transition: all .1s ease;
644 | -ms-transition: all .1s ease;
645 | -o-transition: all .1s ease;
646 | transition: all .1s ease;
647 | @include long-shadow($type: text, $color: darken($color,2%), $length: 45, $fadeout: false, $skew: true, $direction: right);
648 | }
649 |
650 | }
651 | .sound-trigger__speach{
652 | position: absolute;
653 | z-index: 60;
654 | width: 100%;
655 | background-color: $color-text;
656 | color: $color-white;
657 | -webkit-border-radius: 3px;
658 | -moz-border-radius: 3px;
659 | -ms-border-radius: 3px;
660 | -o-border-radius: 3px;
661 | border-radius: 3px;
662 | font-size: 14rem;
663 | top: -3em;
664 | left: 0;
665 | text-align: center;
666 |
667 | &:after {
668 | top: 100%;
669 | left: 50%;
670 | border: solid transparent;
671 | content: " ";
672 | height: 0;
673 | width: 0;
674 | position: absolute;
675 | pointer-events: none;
676 | //border-color: rgba(136, 183, 213, 0);
677 | border-top-color: $color-text;
678 | border-width: 4px;
679 | margin-left: -4px;
680 | }
681 | }
682 |
683 | }
684 |
685 | .sound-trigger--type-default { @include sound-trigger ( 100px , $color-key );}
686 | .sound-trigger--type-default-2 { @include sound-trigger ( 100px , $color-key-sub );}
687 |
688 | .sound-trigger--type-small { @include sound-trigger ( 50px , $color-key );}
689 | .sound-trigger--type-small-2 { @include sound-trigger ( 50px , $color-key-sub );}
690 |
691 |
692 |
693 | @-webkit-keyframes motion__hover{
694 | 0%{
695 | -webkit-transform:translateY(0);
696 | transform:translateY(0);
697 | }
698 | 100%{
699 | -webkit-transform:translateY(10px);
700 | transform:translateY(10px);
701 | }
702 | }
703 | @keyframes motion__hover{
704 | 0%{
705 | -webkit-transform:translateY(0);
706 | -ms-transform:translateY(0);
707 | transform:translateY(0);
708 | }
709 | 100%{
710 | -webkit-transform:translateY(10px);
711 | -ms-transform:translateY(10px);
712 | transform:translateY(10px);
713 | }
714 | }
715 |
716 | @-webkit-keyframes motion__click{
717 | 0%{
718 | -webkit-transform:translateY(5px);
719 | transform:translateY(5px);
720 | }
721 | 10%{
722 | -webkit-transform:translateY(10px);
723 | transform:translateY(10px);
724 | }
725 | 50%{
726 | -webkit-transform:translateY(10px);
727 | transform:translateY(10px);
728 | }
729 | 100%{
730 | -webkit-transform:translateY(5px);
731 | transform:translateY(5px);
732 | }
733 | }
734 | @keyframes motion__click{
735 | 0%{
736 | -webkit-transform:translateY(5px);
737 | -ms-transform:translateY(5px);
738 | transform:translateY(5px);
739 | }
740 | 10%{
741 | -webkit-transform:translateY(10px);
742 | -ms-transform:translateY(10px);
743 | transform:translateY(10px);
744 | }
745 | 50%{
746 | -webkit-transform:translateY(10px);
747 | -ms-transform:translateY(10px);
748 | transform:translateY(10px);
749 | }
750 | 100%{
751 | -webkit-transform:translateY(5px);
752 | -ms-transform:translateY(5px);
753 | transform:translateY(5px);
754 | }
755 | }
756 |
757 |
758 | .swipe-example{
759 | -webkit-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
760 | -moz-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
761 | -ms-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
762 | -o-animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
763 | animation: motion__swipe-l-r 3s ease-in-out 0s infinite;
764 | &__child{
765 | line-height: 1;
766 | font-size: 40rem;
767 | i{
768 | -webkit-transform: rotate(45deg);
769 | -moz-transform: rotate(45deg);
770 | -ms-transform: rotate(45deg);
771 | -o-transform: rotate(45deg);
772 | transform: rotate(45deg);
773 | }
774 | }
775 | }
776 | @-webkit-keyframes motion__swipe-l-r{
777 | 0%{
778 | opacity: 0;
779 | -webkit-transform:translateX(0);
780 | transform:translateX(0);
781 | }
782 | 50%{
783 | opacity: 1;
784 | }
785 | 100%{
786 | opacity: 0;
787 | -webkit-transform:translateX(100%);
788 | transform:translateX(100%);
789 | }
790 | }
791 | @keyframes motion__swipe-l-r{
792 | 0%{
793 | opacity: 0;
794 | -webkit-transform:translateX(0);
795 | -ms-transform:translateX(0);
796 | transform:translateX(0);
797 | }
798 | 50%{
799 | opacity: 1;
800 | }
801 | 100%{
802 | opacity: 0;
803 | -webkit-transform:translateX(100%);
804 | -ms-transform:translateX(100%);
805 | transform:translateX(100%);
806 | }
807 | }
808 |
809 |
810 |
811 | .footer{
812 | text-align: center;
813 | padding: 4em 1em;
814 | color: $color-text-sub;
815 |
816 | &__btn-top{
817 | padding: 0 40px 40px 40px;
818 | //font-size: 40rem;
819 | float: right;
820 | background-color: transparent;
821 | color: $color-text;
822 | &:hover{
823 | color: $color-text;
824 | background-color: transparent;
825 | -webkit-transform: scale(2);
826 | -moz-transform: scale(2);
827 | -ms-transform: scale(2);
828 | -o-transform: scale(2);
829 | transform: scale(2);
830 | }
831 | }
832 | }
833 |
834 |
835 |
836 |
837 |
838 |
839 |
840 |
841 |
842 |
843 | //-------------
844 | #easyaudioeffects{
845 | .syntaxhighlighter{
846 | .toolbar{
847 | display: none;
848 | }
849 | -webkit-border-radius: 4px;
850 | -moz-border-radius: 4px;
851 | -ms-border-radius: 4px;
852 | -o-border-radius: 4px;
853 | border-radius: 4px;
854 |
855 | font-size: 18rem!important;
856 | *{
857 | font-size: 18rem!important;
858 | }
859 |
860 | background-color: darken($color-text , 10%)!important;
861 |
862 | .gutter{
863 | background-color: darken($color-text , 10%)!important;
864 | .line {
865 | border-right: 3px solid darken($color-text , 10%)!important;
866 | }
867 | .line.alt1{
868 | background-color: rgba(black ,.2)!important;
869 | }
870 | .line.alt2{
871 | background-color: rgba(black ,.1)!important;
872 | }
873 | .line.highlighted{
874 | border-right: 3px solid darken($color-white , 20%)!important;
875 | }
876 | .line.highlighted.alt1,
877 | .line.highlighted.alt2 {
878 | color: $color-white!important;
879 | background-color: darken($color-text , 0%)!important;
880 | }
881 |
882 | }
883 | .code{
884 | background-color: darken($color-text , 10%)!important;
885 |
886 | .container{
887 | background-color: darken($color-text , 10%)!important;
888 | .line.alt1{
889 | background-color: rgba(black ,.2)!important;
890 | }
891 | .line.alt2{
892 | background-color: rgba(black ,.1)!important;
893 | }
894 | .line.highlighted.alt1,
895 | .line.highlighted.alt2 {
896 | background-color: darken($color-text , 0%)!important;
897 | }
898 | }
899 | }
900 |
901 |
902 | }
903 | .syntaxhighlighter .string,
904 | .syntaxhighlighter .string a {
905 | color : $color-key-sub!important;
906 |
907 | }
908 |
909 | }
910 |
911 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | jquery.easyAudioEffects.js
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
40 |
41 |
42 |
43 |
44 |
45 |
59 |
60 |
61 |
62 | EasyAudioEffects.js
63 |
64 | Easily set up sound effects to HTML elements
65 |
66 |
67 |
68 |
69 | Download on
70 | GitHub
71 |
72 |
73 |
74 | Latest Version : v1.0.0
75 | with jQuery - v1.7.0 or Later.
76 |
77 |
78 |
79 |
80 |
81 |
108 |
109 |
110 |
111 |
138 |
139 |
140 |
141 |
168 |
169 |
170 |
171 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
206 | About
207 |
208 |
209 | easyAudioEffects.js
210 | easyAudioEffects.js is jquery plug-in.
211 | This can be given a very easy sound effects for any of the elements on your WEB site.
212 |
213 |
214 |
215 | compatible browser
216 |
217 |
218 |
219 | This plug-in is the reaction slightly in Safari is slow. (Jun , 2015)
220 |
221 |
222 |
223 |
224 |
225 | Usage
226 |
227 |
228 |
229 |
Basic Usage
230 |
231 |
232 | //v1.7.0〜
233 |
234 |
235 |
236 |
237 | jQuery v1.7.0 or later.
238 |
239 |
240 |
241 | $('.selector').easyAudioEffects({
242 | ogg : "/path/to/sound.ogg",
243 | mp3 : "/path/to/sound.mp3"
244 | });
245 |
246 |
247 |
248 |
249 |
250 |
251 |
Available Options
252 |
253 |
254 |
255 | Parameter
256 | Type
257 | Default value
258 | Description
259 |
260 |
261 |
262 |
263 | ogg
264 | string
265 | none
266 |
267 | Specify the file path Required
268 |
269 |
270 |
271 | mp3
272 | string
273 | none
274 |
275 | Specify the file path Required
276 |
277 |
278 |
279 | eventType
280 | string
281 | "hover"
282 |
283 | Could be
284 | "hover"
285 | or
286 | "click"
287 |
288 |
289 |
290 | playType
291 | string
292 | "oneShotPolyphonic"
293 |
294 | Could be
295 | "oneShotPolyphonic" ,
296 | "oneShotMonophonic" ,
297 | "gate"
298 | or
299 | "loop"
300 |
301 |
302 |
303 |
304 |
305 |
306 |
307 |
308 |
309 |
310 |
311 | Examples
312 |
313 |
314 |
315 |
eventType :
316 |
317 |
318 |
HOVER!
319 |
320 |
321 |
322 |
323 |
324 |
325 |
CLICK!
326 |
327 |
328 |
329 |
330 |
331 |
332 |
346 |
347 |
348 | $('.selector').easyAudioEffects({
349 | ogg : "./path/to/sound.ogg",
350 | mp3 : "./path/to/sound.mp3",
351 | eventType : "hover" // or "click"
352 | });
353 |
354 |
355 |
356 |
357 |
358 |
359 |
360 |
361 |
playType :
362 |
363 |
364 |
365 |
366 |
367 |
368 | playType : "oneShotPolyphonic"
369 |
370 |
373 |
376 |
379 |
383 |
386 |
389 |
392 |
393 |
398 |
399 |
400 |
BARRAGE!
401 |
402 |
403 |
404 |
405 |
406 |
407 |
423 |
424 |
425 | $('.selector').easyAudioEffects({
426 | ogg : "./path/to/sound.ogg",
427 | mp3 : "./path/to/sound.mp3",
428 | eventType : "hover", // or "click"
429 | playType : "oneShotPolyphonic"
430 | });
431 |
432 |
433 |
434 |
435 |
436 |
437 | playType : "oneShotMonophonic"
438 |
439 |
442 |
445 |
448 |
452 |
455 |
458 |
461 |
462 |
467 |
468 |
469 |
BARRAGE!
470 |
471 |
472 |
473 |
474 |
475 |
476 |
492 |
493 |
494 | $('.selector').easyAudioEffects({
495 | ogg : "./path/to/sound.ogg",
496 | mp3 : "./path/to/sound.mp3",
497 | eventType : "hover", // or "click"
498 | playType : "oneShotMonophonic"
499 | });
500 |
501 |
502 |
503 |
504 |
505 |
506 | playType : "gate"
507 |
508 |
509 |
HOVER!
510 |
511 |
512 |
513 |
514 |
515 |
CLICK!
516 |
517 |
518 |
519 |
520 |
521 |
537 |
538 |
539 | $('.selector').easyAudioEffects({
540 | ogg : "./path/to/sound.ogg",
541 | mp3 : "./path/to/sound.mp3",
542 | eventType : "hover", // or "click"
543 | playType : "gate"
544 | });
545 |
546 |
547 |
548 |
549 |
550 |
551 |
552 | playType : "loop"
553 |
554 |
555 |
HOVER!
556 |
557 |
558 |
559 |
560 |
561 |
CLICK!
562 |
563 |
564 |
565 |
566 |
567 |
583 |
584 |
585 | $('.selector').easyAudioEffects({
586 | ogg : "./path/to/sound.ogg",
587 | mp3 : "./path/to/sound.mp3",
588 | eventType : "hover", // or "click"
589 | playType : "loop"
590 | });
591 |
592 |
593 |
594 |
595 |
596 |
597 |
598 | Licence
599 |
600 |
601 | easyAudioEffects.js licensed under MIT license.
602 | You are free to use easyAudioEffects.js for your personal or commercial websites projects.
603 |
604 |
605 | The latest source code is available on GitHub .
606 |
607 |
608 |
609 |
610 |
611 |
612 |
613 |
616 |
617 |
618 |
619 |
620 |
624 |
625 |
626 |
635 |
636 |
637 |
638 |
645 |
646 |
647 |
--------------------------------------------------------------------------------
/jquery.easyaudioeffects.1.0.0.js:
--------------------------------------------------------------------------------
1 | /**
2 | * DeviceMock 1.0.0
3 | * Licensed under MIT
4 | */
5 | ;(function($) {
6 | $.fn.easyAudioEffects = function(options) {
7 | var opts = $.extend(true, {}, $.fn.easyAudioEffects.defaults, options);
8 | var $this = $(this);
9 | var myAudio;
10 | var polyTmpAudio = [];
11 | var polyTmpAudioKey = 0;
12 | var mySourceSrc = '';
13 | var soundSource = {};
14 | soundSource = {
15 | ogg : opts.ogg,
16 | mp3 : opts.mp3
17 | }
18 | try {
19 | myAudio = new Audio("");
20 | if( myAudio.canPlayType ){
21 | var canPlayOgg = ("" != myAudio.canPlayType("audio/ogg"));
22 | var canPlayMp3 = ("" != myAudio.canPlayType("audio/mpeg"));
23 | if(canPlayOgg && soundSource.ogg != null ){
24 | // support ogg
25 | mySourceSrc = soundSource.ogg;
26 | myAudio.src = mySourceSrc;
27 | }else if(canPlayMp3 && soundSource.mp3 != null ){
28 | // support mp3
29 | mySourceSrc = soundSource.mp3;
30 | myAudio.src = mySourceSrc;
31 | } else if( soundSource.ogg == null || soundSource.mp3 == null ) {
32 | throw "Please specify an audio source";
33 | }else{
34 | throw "Also ogg and mp3 also does not support";
35 | }
36 | }else{
37 | throw "canPlayType method does not exist";
38 | }
39 | } catch (e) {
40 | console.log(e);
41 | myAudio = null;
42 | }
43 | function playSound (){
44 | switch(opts.playType) {
45 | case 'loop' :
46 | myAudio.currentTime = 0;
47 | myAudio.loop = true;
48 | myAudio.play();
49 | break;
50 | case 'gate' :
51 | myAudio.currentTime = 0;
52 | myAudio.play();
53 | break;
54 | case 'oneShotMonophonic' :
55 | myAudio.currentTime = 0;
56 | myAudio.play();
57 | break;
58 | case 'oneShotPolyphonic' :
59 | default :
60 | if(mySourceSrc != ''){
61 | polyTmpAudio[polyTmpAudioKey] = new Audio(mySourceSrc);
62 | polyTmpAudio[polyTmpAudioKey].play();
63 | //clear memory
64 | polyTmpAudio[polyTmpAudioKey].addEventListener('ended', function() {
65 | polyTmpAudio[polyTmpAudioKey] = null;
66 | });
67 | polyTmpAudioKey++;
68 | }
69 | break;
70 | }
71 | }
72 | function stopSound (){
73 | switch(opts.playType) {
74 | case 'loop' :
75 | myAudio.pause();
76 | break;
77 | case 'gate' :
78 | myAudio.pause();
79 | break;
80 | case 'oneShotMonophonic' :
81 | break;
82 | case 'oneShotPolyphonic' :
83 | default :
84 | break;
85 | }
86 | }
87 | if(myAudio != null){
88 | switch( opts.eventType ){
89 | case 'click' :
90 | $this.on('mousedown', function(){
91 | playSound();
92 | }).on('mouseup', function(){
93 | stopSound();
94 | });
95 | break;
96 |
97 | case 'hover' :
98 | default :
99 | $this.on({
100 | mouseenter : function(){
101 | playSound();
102 | },
103 | mouseleave : function(){
104 | stopSound();
105 | }
106 | });
107 | break;
108 | }
109 | }
110 | };
111 | $.fn.easyAudioEffects.defaults = {
112 | ogg : null,
113 | mp3 : null,
114 | eventType : 'hover' , // [ hover / click ]
115 | playType : 'oneShotPolyphonic' // [ oneShotPolyphonic / oneShotMonophonic / gate / loop ]
116 | };
117 | })(jQuery);
--------------------------------------------------------------------------------
/jquery.easyaudioeffects.1.0.0.min.js:
--------------------------------------------------------------------------------
1 | !function($){$.fn.easyAudioEffects=function(e){function o(){switch(a.playType){case"loop":c.currentTime=0,c.loop=!0,c.play();break;case"gate":c.currentTime=0,c.play();break;case"oneShotMonophonic":c.currentTime=0,c.play();break;case"oneShotPolyphonic":default:""!=s&&(t[u]=new Audio(s),t[u].play(),t[u].addEventListener("ended",function(){t[u]=null}),u++)}}function n(){switch(a.playType){case"loop":c.pause();break;case"gate":c.pause();break;case"oneShotMonophonic":break;case"oneShotPolyphonic":}}var a=$.extend(!0,{},$.fn.easyAudioEffects.defaults,e),l=$(this),c,t=[],u=0,s="",p={};p={ogg:a.ogg,mp3:a.mp3};try{if(c=new Audio(""),!c.canPlayType)throw"canPlayType method does not exist";var i=""!=c.canPlayType("audio/ogg"),y=""!=c.canPlayType("audio/mpeg");if(i&&null!=p.ogg)s=p.ogg,c.src=s;else{if(!y||null==p.mp3)throw null==p.ogg||null==p.mp3?"Please specify an audio source":"Also ogg and mp3 also does not support";s=p.mp3,c.src=s}}catch(f){console.log(f),c=null}if(null!=c)switch(a.eventType){case"click":l.on("mousedown",function(){o()}).on("mouseup",function(){n()});break;case"hover":default:l.on({mouseenter:function(){o()},mouseleave:function(){n()}})}},$.fn.easyAudioEffects.defaults={ogg:null,mp3:null,eventType:"hover",playType:"oneShotPolyphonic"}}(jQuery);
--------------------------------------------------------------------------------