API tools faq
paste
Advertisement
Mangus875

Rolling Square Metronome

Mangus875
Dec 3rd, 2023 (edited)
816
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.63 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>Animated Metronome</title>
  5.         <script>
  6.             var bpmSlider,met;
  7.             window.onload = () => {
  8.                 bpmSlider = document.getElementById("bpm-slider");
  9.                 met = document.querySelector(".rolling_square div");
  10.                 met.style.setProperty("animation-play-state", "paused");
  11.                
  12.                 setInterval(() => {
  13.                     let bpm = bpmSlider.value;
  14.                     met.style.setProperty('--duration', `calc(240s / ${bpm})`);
  15.                     document.querySelector(".slidecontainer").setAttribute("data-bpm", bpm);
  16.                 });
  17.                
  18.                 document.querySelector(".rolling_square").onclick = () => {
  19.                     let playing = getComputedStyle(met).getPropertyValue("animation-play-state") == "running";
  20.                     if (playing) {
  21.                         met.style.setProperty("animation-play-state", "paused");
  22.                         met.style.setProperty("animation", "none");
  23.                         setTimeout(() => {
  24.                             met.style.setProperty("animation", "roll var(--duration) ease-in infinite");
  25.                             met.style.setProperty("animation-play-state", "paused");
  26.                         });
  27.                         return;
  28.                     }
  29.                     met.style.setProperty("animation-play-state", "running");
  30.                 }
  31.             }
  32.         </script>
  33.         <style>
  34.             :root {
  35.                 background-color: #2d2d2d;
  36.                 overflow: hidden;
  37.             }
  38.             .rolling_square {
  39.                 --bpm: 120;
  40.                 --duration: calc(240s / var(--bpm));
  41.                 position: absolute;
  42.                 left: 50%;
  43.                 top: 50%;
  44.                 width: 360px;
  45.                 height: 360px;
  46.                 background-color: #fff;
  47.                 transform: translate(-50%, -50%);
  48.             }
  49.             .rolling_square div {
  50.                 position: absolute;
  51.                 width: 50%;
  52.                 height: 50%;
  53.                 background-color: #ff5533;
  54.                 animation: roll var(--duration) ease-in infinite;
  55.                 animation-play-state:
  56.             }
  57.             @keyframes roll {
  58.                 0% {
  59.                     transform-origin: top right;
  60.                     transform: translate(0%, 0%);
  61.                 }
  62.                 25% {
  63.                     transform-origin: top right;
  64.                     transform: rotate(-90deg);
  65.                 }
  66.                 25.000001% {
  67.                     transform-origin: bottom right;
  68.                     transform: translate(100%, 0) rotate(0deg);
  69.                 }
  70.                 50% {
  71.                     transform-origin: bottom right;
  72.                     transform: translate(100%, 0%) rotate(-90deg);
  73.                 }
  74.                 50.000001% {
  75.                     transform-origin: bottom left;
  76.                     transform: translate(100%, 100%) rotate(0deg);
  77.                 }
  78.                 75% {
  79.                     transform-origin: bottom left;
  80.                     transform: translate(100%, 100%) rotate(-90deg);
  81.                 }
  82.                 75.000001% {
  83.                     transform-origin: top left;
  84.                     transform: translate(0%, 100%) rotate(0deg);
  85.                 }
  86.                 100% {
  87.                     transform-origin: top left;
  88.                     transform: translate(0%, 100%) rotate(-90deg);
  89.                 }
  90.             }
  91.             .slidecontainer {
  92.                 position: absolute;
  93.                 left: 50%;
  94.                 top: calc(50% - 184px);
  95.                 transform: translate(-50%, -50%);
  96.                 width: 320px;
  97.                 display: flex;
  98.                 flex-direction: row;
  99.             }
  100.             .slidecontainer::before {
  101.                 transform: translateY(-60%);
  102.                 font-family: consolas;
  103.                 font-size: 20px;
  104.                 color: #fff;
  105.                 content: attr(data-bpm) " BPM";
  106.             }
  107.             .slider {
  108.                 -webkit-appearance: none;
  109.                 width: 100%;
  110.                 height: 10px;
  111.                 border-radius: 5px;
  112.                 background: #ddd;
  113.                 outline: none;
  114.             }
  115.             .slider::-webkit-slider-thumb {
  116.                 -webkit-appearance: none;
  117.                 appearance: none;
  118.                 width: 15px;
  119.                 height: 15px;
  120.                 border-radius: 50%;
  121.                 background: #ff5533;
  122.                 cursor: pointer;
  123.             }
  124.             center {
  125.                 color: #aaa;
  126.                 font-family: Consolas;
  127.                 user-select: none;
  128.                 position: relative;
  129.                 top: 101%;
  130.             }
  131.         </style>
  132.     </head>
  133.     <body>
  134.         <div class='slidecontainer' data-bpm='120'>
  135.             <input type='range' min='10' max='360' value='120' class='slider' id='bpm-slider'>
  136.         </div>
  137.         <div id='metronome' class='rolling_square'>
  138.             <div id='ticker'></div>
  139.             <center>Click to play</center>
  140.         </div>
  141.     </body>
  142. </html>
Tags: music html Metronome
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!