Skip to content

Instantly share code, notes, and snippets.

@jamesknelson

jamesknelson/index.html

Created March 25, 2020 14:41
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 jamesknelson/ff018f03b7248bfa7168865a54be5c75 to your computer and use it in GitHub Desktop.
Save jamesknelson/ff018f03b7248bfa7168865a54be5c75 to your computer and use it in GitHub Desktop.
Download ZIP
Falling sakura 1
Raw
index.html
<body>
<style>
body {
/* background-color: rgb(195, 226, 224); */
background-color: black;
overflow: hidden;
}
.petal {
position: absolute;
animation: 2s ease-out arc;
}
.inner {
animation: 2s ease-out rotate;
opacity: 0;
}
.petal .left {
position: relative;
background-color: rgb(253, 225, 255);
border-top-left-radius: 99px;
border-bottom-left-radius: 99px;
transform: scaleX(0.5);
height: 30px;
width: 14px;
}
.petal .right {
position: absolute;
top: 0;
left: 6px;
background-color: rgb(253, 225, 255);
border-top-right-radius: 99px;
border-bottom-right-radius: 99px;
transform: scaleX(0.5);
height: 30px;
width: 14px;
}
@keyframes arc {
100% {
transform: rotate(0deg);
}
}
@keyframes rotate {
0% {
transform: rotate(10deg) scale(1.2);
}
10% {
opacity: 1;
transform: rotate3d(0deg) scale(1.1);
}
100% {
opacity: 0;
transform: rotate(-60deg) scale(0.8);
}
}
</style>
<script>
function addPetal(options) {
const petalLeft = document.createElement('div')
const petalRight = document.createElement('div')
const petalInner = document.createElement('div')
const petalOuter = document.createElement('div')
petalLeft.className = "left"
petalRight.className = "right"
petalInner.className = "inner"
petalOuter.className = "petal"
petalInner.appendChild(petalLeft)
petalInner.appendChild(petalRight)
petalOuter.appendChild(petalInner)
petalOuter.style.left = options.left
petalOuter.style.top = options.top
petalOuter.style.transformOrigin = "0 "+options.arcRadius+"px"
petalOuter.style.transform = "rotate("+options.arcAngle+"deg)"
document.body.appendChild(petalOuter)
}
setInterval(() => {
const height = document.body.clientHeight
const width = document.body.clientWidth
addPetal({
left: width * Math.random(),
top: height * Math.random(),
arcAngle: 30 + Math.random() * 150,
arcRadius: 150 + Math.random() * 150,
})
}, 50)
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment