Skip to content

Instantly share code, notes, and snippets.

@danivicario

danivicario/index.html

Created August 19, 2020 18:01
Show Gist options
  • Save danivicario/28912a68231340bac2cd15f68d2bc665 to your computer and use it in GitHub Desktop.
Save danivicario/28912a68231340bac2cd15f68d2bc665 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
/* flex-direction: column; */
flex-wrap: wrap;
}
.type1 {
background: url(b1.png) no-repeat;
}
.type2 {
background: url(b2.png) no-repeat;
}
.type3 {
background: url(b3.png) no-repeat;
}
.type4 {
background: url(b4.png) no-repeat;
}
.type5 {
background: url(b5.png) no-repeat;
}
.butterfly {
width: 300px;
height: 300px;
background-size: contain;
opacity: 0;
transition: opacity 1s;
}
.butterfly.visible {
transition: opacity 1s;
opacity: 1;
}
</style>
</head>
<body>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<div class="butterfly"></div>
<script>
function randomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
// here we select all the butterflies with code
document.querySelectorAll(".butterfly").forEach((butterfly, index) => {
// randomInt generates a random number between 1 and 5
// we assign to each butterfly a random type[n] class :)
butterfly.classList.add("type" + randomInt(1, 5))
// we are setting a random height and width to each butterfly between 10 and 300 pixels
butterfly.style.height = butterfly.style.width = randomInt(10, 300) + "px"
// we are setting a random rotation between 0 and 360 degrees to each butterfly
butterfly.style.transform = `rotate(${randomInt(0, 360)}deg)`
// we are making each butterfly visible after certain period of 100ms up to 1000ms
setTimeout(() => butterfly.classList.add("visible"), randomInt(100, 1000))
// if i click on one butterfly i make it dissapear
butterfly.onclick = function () {
butterfly.classList.remove("visible")
alert("You have click on the butterfly section " + index)
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment