random height changer

by Adam Kinnucane

HTML

<div class="spin">
<div class="circle">
</div>
<div class="scalable-div">
<div class="scalable-relative">
<div class="scalable-wrapper" id="unique-wrapper-1">
	<img class="svg-img" id="unique-1" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset1.svg">
</div>
	
<div class="scalable-wrapper" id="unique-wrapper-2">
	<img class="svg-img" id="unique-2"src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset2.svg">
</div>

<div class="scalable-wrapper" id="unique-wrapper-3">
	<img class="svg-img" id="unique-3" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset3.svg">
</div>

<div class="scalable-wrapper" id="unique-wrapper-4">
	<img class="svg-img" id="unique-4" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset4.svg">
</div>

<div class="scalable-wrapper" id="unique-wrapper-5">
	<img class="svg-img" id="unique-5" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset5.svg">
</div>

<div class="scalable-wrapper" id="unique-wrapper-6">
	<img class="svg-img" id="unique-6" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset6.svg">
</div>
	
<div class="scalable-wrapper" id="unique-wrapper-7">
	<img class="svg-img" id="unique-7" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset7.svg">
</div>
	
<div class="scalable-wrapper" id="unique-wrapper-8">
	<img class="svg-img" id="unique-8" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset8.svg">
</div>
</div>
</div>

CSS

.svg-img {
	position: relative;
	margin: auto;
	height: 250px;
	display: flex;
	width: fit-content;
}

.scalable-relative {
	margin: auto;
  width: 50%;
  height: 80%;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.spin {
	position: absolute;
	top: -10%;
	left: -20%;
	padding: 320px;
}

.circle {
	height: 240px;
	width: 240px;
	border-radius: 120px;
	position: absolute;
	z-index: 10;
	background: white;
	top: 40%;
	left: 40%;
	    -webkit-animation: mymove 30s infinite; /* Safari 4.0 - 8.0 */
   animation: mymove 30s infinite;
	     -webkit-animation-timing-function: 30s linear; /* Safari 4.0 - 8.0 */
   animation-timing-function: linear;
}

.scalable-wrapper {
    position: absolute;
    margin: auto;
    height: fit-content;
    width: 250px;
}

#unique-wrapper-1 {
	 z-index: 2;
    left: 11%;
    transform: rotate(-2deg);
    top: -11%;
}

#unique-wrapper-2  {
	left: 30%;
    transform: rotate(2deg);
}

#unique-wrapper-3  {
	 left: 46%;
    top: -2%;
}

#unique-wrapper-4  {
    left: 41%;
    bottom: 22%;
}

#unique-wrapper-5  {
	z-index: 2;
		display: none;
}

#unique-wrapper-6  {
		display: none;
}

#unique-wrapper-7  {
		display: none;
}

#unique-wrapper-8  {
	z-index: -1;
		display: none;
}

.scalable-div {
	background-color: red;
	height: 500px;
	width: 500px;
   position :relative;
    -webkit-animation: mymove 20s infinite; /* Safari 4.0 - 8.0 */
   animation: mymove 20s infinite;
	     -webkit-animation-timing-function: 20s linear; /* Safari 4.0 - 8.0 */
   animation-timing-function: linear;
	background: white;
}

/*

@-webkit-keyframes mymove {
    25% {transform:scale(0.75);}
    50% {transform:scale(1);}
	 75% {transform:scale(0.75);}
    100% {transform:scale(1);}
}

@keyframes mymove {
    25% {transform:scale(0.75);}
    50% {transform:scale(1);}
	 75% {transform:scale(0.75);}
    100% {transform:scale(1);}
}

/*

.spin {
	position: absolute;
	top: -10%;
	left: -20%;
	padding: 320px;
		 -webkit-animation:spin 10s linear...

JavaScript

function randomly_animate_object_height(){
	var $objects = $(".svg-img");
	setInterval(function(){
		var random_index = Math.floor(Math.random() * $objects.length);
		var new$ = $objects.eq( random_index );
		console.log(new$);
		//console.log(new$);
	}, 2000);
	
	return new$;
}

function get_random_int (min, max, unit) {
    return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}



randomly_animate_object_height();