Skip to content

Instantly share code, notes, and snippets.

@wolfg1969

wolfg1969/demo.html

Created January 6, 2015 15:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wolfg1969/df9043f09a1a0e5f57fc to your computer and use it in GitHub Desktop.
Save wolfg1969/df9043f09a1a0e5f57fc to your computer and use it in GitHub Desktop.
Download ZIP
Raw
demo.html
<html>
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="sound-on" class="music">
<div id="bar1"></div>
<div id="bar2"></div>
<div id="bar3"></div>
</div>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
soundOn();
});
function soundOn(){
$("#bar1").animate({height:'100px'}, 100, soundOn);
$("#bar2").animate({height:'100px'}, 150);
$("#bar3").animate({height:'100px'}, 150);
$("#bar1").animate({height:'70px'}, 150);
$("#bar2").animate({height:'100px'}, 150);
$("#bar3").animate({height:'40px'}, 150);
$("#bar1").animate({height:'30px'}, 150);
$("#bar2").animate({height:'60px'}, 150);
$("#bar3").animate({height:'90px'}, 150);
$("#bar1").animate({height:'100px'}, 150);
$("#bar2").animate({height:'20px'}, 150);
$("#bar3").animate({height:'60px'}, 150);
$("#bar1").animate({height:'50px'}, 150);
$("#bar2").animate({height:'20px'}, 150);
$("#bar3").animate({height:'10px'}, 150);
$("#bar1").animate({height:'70px'}, 150);
$("#bar2").animate({height:'40px'}, 150);
$("#bar3").animate({height:'90px'}, 150);
}
</script>
</body>
</html>
Raw
style.css
*{
margin:0;
padding:0;
}
body{
background:#FF7256;
height:100%;
}
#bar1{
border-style:solid;
border-color:#FFF;
height:100px;
width:30px;
position:absolute;
background:#FFF;
bottom:20%;
left:450px;
}
#bar2{
border-style:solid;
border-color:#FFF;
height:100px;
width:30px;
position:absolute;
background:#FFF;
bottom:20%;
left:500px;
}
#bar3{
border-style:solid;
border-color:#FFF;
height:100px;
width:30px;
position:absolute;
background:#FFF;
bottom:20%;
left:550px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment