<div id="audiobox"></div>
<p class="credits">Music : <a href="https://soundcloud.com/fakear/ordinary" target="_blank">Ordinary by Fakear</a></p>
<p class="mention">HTML5 Audio API + Three JS experiement by <a href="http://hengpatrick.fr/" target="_blank">Patrick HENG</a> | <a href="https://github.com/patrickheng/three-js-audio-experiment-v2/" target="_blank">Source Code</a></p>body, html {
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background : url('http://lab.hengpatrick.fr/three-js-audio-experiment-2/preview.png') center;
background-size : cover;
}
canvas {
cursor: move;
}
p {
font-size: .8em;
color: white;
}
.mention {
position: absolute;
right: 25px;
bottom: 30px;
animation: fadeInLeft 1s ease-out;
}
.credits {
position: absolute;
right: 25px;
bottom: 10px;
animation: fadeInLeft 1s ease-out 0.5s backwards;
}
a {
transition: all .3s ease;
text-decoration: none;
color: #e74c3c;
a:hover {
color: #c0392b;
}
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0%);
}
}/*
The code is written in ES2015 and it is available here :
https://github.com/patrickheng/three-js-audio-experiment-v2
Hope you like it !
http://hengpatrick.fr/
*/
External CSS
This Pen doesn't use any external CSS resources.