Created
June 9, 2024 05:31
-
-
Save joshparkerj/ff3d0b6328934eeab98200ca51d38229 to your computer and use it in GitHub Desktop.
timer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Document</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Danfo&family=Jacquard+12&family=Poetsen+One&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Danfo&family=Jacquard+12&family=Poetsen+One&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Shadows+Into+Light&family=Zeyada&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <style> | |
| .one { | |
| font-family: "Poetsen One", sans-serif; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .two { | |
| font-family: "Danfo", serif; | |
| font-optical-sizing: auto; | |
| font-weight: 400; | |
| font-style: normal; | |
| font-variation-settings: "ELSH" 0; | |
| } | |
| .three { | |
| font-family: "Jacquard 12", system-ui; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .four { | |
| font-family: "Zeyada", cursive; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .five { | |
| font-family: "Indie Flower", cursive; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| .six { | |
| font-family: "Shadows Into Light", cursive; | |
| font-weight: 400; | |
| font-style: normal; | |
| } | |
| span.four { | |
| transform: translateY(-11rem); | |
| display: inline-block; | |
| } | |
| span.five { | |
| transform: translateY(-11rem); | |
| display: inline-block; | |
| } | |
| span.six { | |
| transform: translateX(-63px) translateY(-11.1rem) rotate(5deg); | |
| display: inline-block; | |
| } | |
| h1 { | |
| z-index: 1; | |
| position: fixed; | |
| align-content: center; | |
| margin: auto; | |
| width: 29rem; | |
| height: 18rem; | |
| font-size: 24rem; | |
| color: chartreuse; | |
| letter-spacing: -3.4rem; | |
| filter: url(#fatter-text); | |
| text-shadow: 2.8rem 1.6rem 1.2rem magenta; | |
| } | |
| body > main { | |
| position: fixed; | |
| inset: 0; | |
| background-image: linear-gradient(to top, #ff7f00 0%, #007fff 100%); | |
| margin: 0; | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .timer { | |
| position: fixed; | |
| inset: 0; | |
| margin: 25%; | |
| border-radius: 100%; | |
| z-index: 2; | |
| font-size: 40rem; | |
| text-align: center; | |
| color: hsl(90, 100%, 95%); | |
| filter: url(#thinner-text); | |
| transform: translateY(-10dvh); | |
| text-shadow: 0px 0px 30px hsl(90, 100%, 85%), | |
| 0px 0px 60px hsl(90, 100%, 75%), | |
| 0px 0px 90px hsl(90, 100%, 65%), | |
| 0px 0px 120px hsl(90, 100%, 55%), | |
| 0px 0px 150px hsl(90, 100%, 45%), | |
| 0px 0px 180px hsl(90, 100%, 35%); | |
| } | |
| .marquee { | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 7rem; | |
| font-size: 3rem; | |
| text-shadow: 1px 1px 1px gray; | |
| } | |
| .marquee > span { | |
| display: inline-block; | |
| position: absolute; | |
| animation-name: marquee; | |
| animation-timing-function: linear; | |
| animation-iteration-count: infinite; | |
| animation-duration: 10s; | |
| } | |
| .marquee > span + span { | |
| transform: translateX(100dvw); | |
| animation-delay: 4s; | |
| } | |
| @keyframes marquee { | |
| 0% { | |
| transform: translateX(100dvw); | |
| } | |
| 100% { | |
| transform: translateX(-500px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <h1> | |
| <span class="four">S</span> | |
| <span class="five">I</span> | |
| <span class="six">T</span> | |
| </h1> | |
| <div class="timer six"></div> | |
| <div class="marquee one"> | |
| <span>silly internet tricks</span><span>stream starting soon</span> | |
| </div> | |
| </main> | |
| <svg width="0"> | |
| <filter id="fatter-text"> | |
| <feMorphology operator="dilate" radius="12 2"></feMorphology> | |
| </filter> | |
| <filter id="thinner-text"> | |
| <feMorphology operator="erode" radius="4"></feMorphology> | |
| </filter> | |
| </svg> | |
| <script> | |
| // bounce the logo off the walls (dvd style) | |
| const logo = document.querySelector("h1"); | |
| const rad0 = 0; | |
| const rad90 = Math.PI / 2; | |
| const rad180 = Math.PI; | |
| const rad270 = Math.PI * (3 / 2); | |
| const rad360 = Math.PI * 2; | |
| const logoRect = logo.getBoundingClientRect(); | |
| const maxLeft = window.innerWidth - logoRect.width; | |
| const maxTop = window.innerHeight - logoRect.height; | |
| let h1Top = maxTop / 3; | |
| logo.style.setProperty("top", `${h1Top}px`); | |
| let h1Left = maxLeft / 4; | |
| logo.style.setProperty("left", `${h1Left}px`); | |
| let angle = Math.random() * rad360; | |
| const velocity = 3; | |
| const step = (timestamp) => { | |
| if (h1Top >= maxTop && h1Left <= 0) { | |
| // logo is in lower left corner | |
| angle = Math.random() * rad90; | |
| } else if (h1Top >= maxTop && h1Left >= maxLeft) { | |
| // logo is in lower right corner | |
| angle = Math.random() * rad90 + rad90; | |
| } else if (h1Top <= 0 && h1Left >= maxLeft) { | |
| // logo is in upper right corner | |
| angle = Math.random() * rad90 + rad180; | |
| } else if (h1Top <= 0 && h1Left <= 0) { | |
| // logo is in upper left corner | |
| angle = Math.random() * rad90 + rad270; | |
| } else if (h1Top >= maxTop && h1Left > 0 && h1Left < maxLeft) { | |
| // logo is along bottom edge | |
| angle = Math.random() * rad180; | |
| } else if (h1Top > 0 && h1Top < maxTop && h1Left >= maxLeft) { | |
| // logo is along right edge | |
| angle = Math.random() * rad180 + rad90; | |
| } else if (h1Top <= 0 && h1Left > 0 && h1Left < maxLeft) { | |
| // logo is along top edge | |
| angle = Math.random() * rad180 + rad180; | |
| } else if (h1Top > 0 && h1Top < maxTop && h1Left <= 0) { | |
| // logo is along left edge | |
| angle = (Math.random() * rad180 + rad270) % rad360; | |
| } | |
| h1Top = h1Top - Math.sin(angle) * velocity; | |
| logo.style.setProperty("top", `${h1Top}px`); | |
| h1Left = h1Left + Math.cos(angle) * velocity; | |
| logo.style.setProperty("left", `${h1Left}px`); | |
| requestAnimationFrame(step); | |
| }; | |
| requestAnimationFrame(step); | |
| const timer = document.querySelector(".timer"); | |
| let time = 120; | |
| timer.textContent = time; | |
| setInterval(() => { | |
| time--; | |
| timer.textContent = time; | |
| }, 1000); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment