Skip to content

Instantly share code, notes, and snippets.

@joshparkerj

joshparkerj/timer.html

Created June 9, 2024 05:31
Show Gist options
  • Save joshparkerj/ff3d0b6328934eeab98200ca51d38229 to your computer and use it in GitHub Desktop.
Save joshparkerj/ff3d0b6328934eeab98200ca51d38229 to your computer and use it in GitHub Desktop.
Download ZIP
timer
Raw
timer.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>
<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