Skip to content

Instantly share code, notes, and snippets.

@xav76
Created October 24, 2012 17:11
Show Gist options
  • Save xav76/3947388 to your computer and use it in GitHub Desktop.
Save xav76/3947388 to your computer and use it in GitHub Desktop.
A CodePen by Flawless13.
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
var elem = $('div');
var count = elem.length;
var setColor = function() {
elem.each(function(){
var $this = $(this);
var color = '#' + (function co(lor){ return (lor +=
[0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random() * 10 + 6)])
&& (lor.length == 6) ? lor : co(lor); })('');
$this.css({'background': color});
});
};
var loop = function(){
setTimeout(function(){
elem.each(function(){
var $this = $(this);
var height = (Math.random() * 30) + 1;
$this.css({
'bottom': height,
'height': height,
'width': '3px'
});
});
loop();
}, 400);
}
setColor();
loop();
body {
background-color: black;
padding: 150px 0 0 100px;
}
div {
background: #fff;
float: left;
height: 1px;
margin: 0 1px 0 0;
position: relative;
transition: all linear 500ms;
width: 3px;
-webkit-box-reflect: below -1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.35, transparent), to(black));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment