a/diagonal-scroll
1
1
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add pendulum demo

Browse source
This commit is contained in:
Anthony Wang 2023-10-09 03:02:02 +00:00
parent a09a0c8c66
commit 31e174e54c
Signed by: a
SSH key fingerprint: SHA256:B5ADfMCqd2M7d/jtXDoihAV/yfXOAbWWri9+GdCN4hQ
1 changed files with 177 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

177
pendulum.html Normal file
View file

@ -0,0 +1,177 @@
<!DOCTYPE html>
<!--
Code mostly taken from:
https://www.geeksforgeeks.org/multiple-pendulum-animation-using-css/
Unbelievable, geeksforgeeks actually producing quality content for once?
I adjusted the numbers based on this demo:
https://sciencedemonstrations.fas.harvard.edu/presentations/pendulum-waves
Also, the lengths are physically accurate (assuming pendulums obey simple harmonic motion which they pretty much do at small angles)
-->
<html>
<head>
<title>
Multiple Pendulum Animation using CSS
</title>
<style>
*,
*:before,
*:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/*.pendulum-base {
width: 500px;
height: 300px;
margin: auto;
border-top: 3px solid #66d63e;
}*/
.pendulum {
position: absolute;
right: 50%;
transform: translate(-50%) rotate(20deg);
width: 2px;
height: calc(1000000px / 65 / 65);
background: #b5ff9a;
animation: moveIt calc(60s / 65) ease-in-out infinite;
transform-origin: 50% 0;
}
.pendulum:nth-of-type(2) {
height: calc(1000000px / 64 / 64);
animation-duration: calc(60s / 64);
}
.pendulum:nth-of-type(3) {
height: calc(1000000px / 63 / 63);
animation-duration: calc(60s / 63);
}
.pendulum:nth-of-type(4) {
height: calc(1000000px / 62 / 62);
animation-duration: calc(60s / 62);
}
.pendulum:nth-of-type(5) {
height: calc(1000000px / 61 / 61);
animation-duration: calc(60s / 61);
}
.pendulum:nth-of-type(6) {
height: calc(1000000px / 60 / 60);
animation-duration: calc(60s / 60);
}
.pendulum:nth-of-type(7) {
height: calc(1000000px / 59 / 59);
animation-duration: calc(60s / 59);
}
.pendulum:nth-of-type(8) {
height: calc(1000000px / 58 / 58);
animation-duration: calc(60s / 58);
}
.pendulum:nth-of-type(9) {
height: calc(1000000px / 57 / 57);
animation-duration: calc(60s / 57);
}
.pendulum:nth-of-type(10) {
height: calc(1000000px / 56 / 56);
animation-duration: calc(60s / 56);
}
.pendulum:nth-of-type(11) {
height: calc(1000000px / 55 / 55);
animation-duration: calc(60s / 55);
}
.pendulum:nth-of-type(12) {
height: calc(1000000px / 54 / 54);
animation-duration: calc(60s / 54);
}
.pendulum:nth-of-type(13) {
height: calc(1000000px / 53 / 53);
animation-duration: calc(60s / 53);
}
.pendulum:nth-of-type(14) {
height: calc(1000000px / 52 / 52);
animation-duration: calc(60s / 52);
}
.pendulum:nth-of-type(15) {
height: calc(1000000px / 51 / 51);
animation-duration: calc(60s / 51);
}
@keyframes moveIt {
0%,
100% {
transform: translate(-50%) rotate(30deg);
}
50% {
transform: translate(-50%) rotate(-30deg);
}
}
.pendulum:before {
content: "";
position: absolute;
border-radius: 50%;
transform: translate(-50%);
left: 50%;
top: 100%;
width: 15px;
height: 15px;
background:
radial-gradient(circle at 70% 35%,
white, #66d63e 30%, #40a31d 50%);
}
.pendulum:after {
content: "";
position: absolute;
left: 50%;
transform: translate(-50%);
top: 115%;
border-radius: 50%;
filter: blur(5px);
width: 25px;
height: 3px;
background: rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div class="pendulum-base">
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
<div class="pendulum"></div>
</div>
</body>
</html>