ffrankies/Oscillating Bars.markdown

## index.html
<html>
  <body>
  <div id="container"></div>
</body>
</html>

## Oscillating Bars.markdown

      
    Raw
  

              Oscillating Bars.markdown
            
          
    Oscillating Bars

50 bars that grow and shrink. First CodePen animation :D
A Pen by Frank on CodePen.
License.

  
## script.js
for(i = 0;i < 50; ++i) {
  $("#container").append("<div class ='bar'>    </div>");
  var x = i + 1;
  var height = "25%";
  var color = "#FFF68F";
  var dur = "12s";
  if( x == 2 || x == 12 || x == 22 || x == 32 || x == 42 ) {
    color = "#c00000";
    height = "38%";
    dur = "15s";
  }
  if( x == 3 || x == 13 || x == 23 || x == 33 || x == 43 ) {
    color = "#FF7F00";
    height = "46%";
    dur = "9s";
  }
  if( x == 4 || x == 14 || x == 24 || x == 34 || x == 44 ) {
    color = "#AF4035";
    height = "36%";
    dur = "20s";
  }
  if( x == 5 || x == 15 || x == 25 || x == 35 || x == 45 ) {
    color = "#FF3300";
    height = "24%";
    dur = "17s";
  }
  if( x == 6 || x == 16 || x == 26 || x == 36 || x == 46 ) {
    color = "#EECBAD";
    height = "22%";
    dur = "10s";
  }
  if( x == 7 || x == 17 || x == 27 || x == 37 || x == 47 ) {
    color = "#EE0000";
    height = "34%";
    dur = "22s";
  }
  if( x == 8 || x == 18 || x == 28 || x == 38 || x == 48 ) {
    color = "#FFEC8B";
    height = "47%";
    dur = "11s";
  }
  if( x == 9 || x == 19 || x == 29 || x == 39 || x == 49 ) {
    color = "#B22222";
    height = "35%";
    dur = "18s";
  }
  if( x % 10 == 0 ) {
    color = "#FFD39B";
    height = "24%";
    dur = "7s";
  }
  $("#container").children().eq(i).css({
    "height": height,
    "left": i*2 + "%",
    "background-color": color,
    "animation-duration": dur
  });
}

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

## style.css
* {
  margin: 0;
}
#container {
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #111111;
}
.bar {
  height: 2%;
  width: 1%;
  margin: 0% 0.5% 0% 0.5%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.7;
  animation-name: oscillate;
  animation-iteration-count: infinite;
}
@keyframes oscillate {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }
  50% {
    transform: scaleY(2);
    transform-origin: 0 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    opacity: 0;
  }
}
	for(i = 0;i < 50; ++i) {
	$("#container").append("<div class ='bar'> </div>");
	var x = i + 1;
	var height = "25%";
	var color = "#FFF68F";
	var dur = "12s";
	if( x == 2 \|\| x == 12 \|\| x == 22 \|\| x == 32 \|\| x == 42 ) {
	color = "#c00000";
	height = "38%";
	dur = "15s";
	}
	if( x == 3 \|\| x == 13 \|\| x == 23 \|\| x == 33 \|\| x == 43 ) {
	color = "#FF7F00";
	height = "46%";
	dur = "9s";
	}
	if( x == 4 \|\| x == 14 \|\| x == 24 \|\| x == 34 \|\| x == 44 ) {
	color = "#AF4035";
	height = "36%";
	dur = "20s";
	}
	if( x == 5 \|\| x == 15 \|\| x == 25 \|\| x == 35 \|\| x == 45 ) {
	color = "#FF3300";
	height = "24%";
	dur = "17s";
	}
	if( x == 6 \|\| x == 16 \|\| x == 26 \|\| x == 36 \|\| x == 46 ) {
	color = "#EECBAD";
	height = "22%";
	dur = "10s";
	}
	if( x == 7 \|\| x == 17 \|\| x == 27 \|\| x == 37 \|\| x == 47 ) {
	color = "#EE0000";
	height = "34%";
	dur = "22s";
	}
	if( x == 8 \|\| x == 18 \|\| x == 28 \|\| x == 38 \|\| x == 48 ) {
	color = "#FFEC8B";
	height = "47%";
	dur = "11s";
	}
	if( x == 9 \|\| x == 19 \|\| x == 29 \|\| x == 39 \|\| x == 49 ) {
	color = "#B22222";
	height = "35%";
	dur = "18s";
	}
	if( x % 10 == 0 ) {
	color = "#FFD39B";
	height = "24%";
	dur = "7s";
	}
	$("#container").children().eq(i).css({
	"height": height,
	"left": i*2 + "%",
	"background-color": color,
	"animation-duration": dur
	});
	}
	* {
	margin: 0;
	}
	#container {
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	position: absolute;
	background-color: #111111;
	}
	.bar {
	height: 2%;
	width: 1%;
	margin: 0% 0.5% 0% 0.5%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0.7;
	animation-name: oscillate;
	animation-iteration-count: infinite;
	}
	@keyframes oscillate {
	0% {
	transform: scaleY(0);
	opacity: 0;
	}
	50% {
	transform: scaleY(2);
	transform-origin: 0 100%;
	opacity: 1;
	}
	100% {
	transform: scaleY(0);
	opacity: 0;
	}
	}