Skip to content

Instantly share code, notes, and snippets.

@plasticmind

plasticmind/index.html

Created February 3, 2021 19:51
Show Gist options
  • Save plasticmind/cdcda8cae25548dd15971a750c4df123 to your computer and use it in GitHub Desktop.
Save plasticmind/cdcda8cae25548dd15971a750c4df123 to your computer and use it in GitHub Desktop.
Download ZIP
Time Visualization - Chrono
Raw
index.html
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/fira+mono/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
</head>
<body>
<div class="day"></div>
<div class="day outline"></div>
<div class="chrono">
<div class="minutes">
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
<span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span><span class="minute"></span>
</div>
<div class="hours">
<span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span><span class="hour"></span>
</div>
</div>
</body>
</html>
Raw
script.js
var day = document.querySelectorAll('.day');
var dayReveal = document.querySelector('.day.outline');
// Animate day
var renderDay = function () {
var this_day = new Date().toLocaleDateString('en-US', { weekday: 'long' }).substring(0,3);
forEach(day, function (index, value) {
day[index].textContent = this_day;
});
};
// Animate seconds as moving bar
var renderSeconds = function () {
var seconds = new Date().getSeconds();
fraction = seconds * 1.66;
dayReveal.style.clipPath = 'polygon(' + fraction + '% 0, 100% 0, 100% 100%, ' + (fraction+20) + '% 100%)';
};
// Animate minutes
var renderMinutes = function () {
var minute_now = new Date().getMinutes();
var minute_list = document.querySelectorAll('.minutes > *');
forEach(minute_list, function (index, value) {
if ( minute_now >= index ) {
minute_list[index].dataset.active="true";
} else {
delete minute_list[index].dataset.active;
}
});
};
// Animate hours
var renderHours = function () {
var hour_now = hours12(new Date());
var hour_list = document.querySelectorAll('.hours > *');
forEach(hour_list, function (index, value) {
if ( hour_now > index ) {
hour_list[index].dataset.active="true";
} else {
delete hour_list[index].dataset.active;
}
});
};
// utility: forEach method
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, i, array[i]); // passes back stuff we need
}
};
// utility: returns the hours number for a date, between 1 and 12
var hours12 = function (date) {
return (date.getHours() + 24) % 12 || 12;
}
var renderTime = function () {
renderSeconds();
renderDay();
renderMinutes();
renderHours();
};
// Render the time on load
renderTime();
// Update time every second
setInterval(renderTime, 1000);
Raw
style.scss
:root {
/* General Colors */
--text-color: #fff;
--background-color: #000;
--background-alt-color: #1A364D;
/* Theme: Everbloom */
/*
--bar1-color: #A73A35;
--bar2-color: #E7B849;
--bar3-color: #5E9691;
--bar4-color: #0072B4;
--bar5-color: #A394E5;
--bar6-color: #C54973;
*/
/* Theme: Numero Uno */
--bar1-color: #54478c;
--bar2-color: #2c699a;
--bar3-color: #048ba8;
--bar4-color: #0db39e;
--bar5-color: #16db93;
--bar6-color: #83e377;
}
html {
box-sizing: border-box;
background: #000;
font-family: 'Fira Mono', monospace;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background: repeating-linear-gradient(
to top,
var(--background-color),
var(--background-color) 3px,
var(--background-alt-color) 3px,
var(--background-alt-color) 4px
);
position: relative;
overflow: hidden;
padding: 0;
margin: 0;
width: 100vw;
height: 100vh;
max-width:100%;
}
.day {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100vw;
height: 100vh;
padding-bottom: 10vh;
color: var(--text-color);
text-align: center;
font-size: 45vw;
font-weight: bold;
text-transform: uppercase;
top: 0;
left: 0;
right: 0;
background: url(https://media.giphy.com/media/26xBzu2ogAunL19hS/giphy.gif) no-repeat center center fixed;
background-size: cover;
transition: clip-path 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.day.outline {
background: #000;
color: transparent;
-webkit-text-stroke-width: 3px;
-webkit-text-stroke-color: #555;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
.seconds {
width: 100vw;
height: 100vh;
background: #000a;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
/* FOOTER for minutes/hours */
.chrono {
position: absolute;
z-index: 3;
bottom: 0;
}
/* MINUTES */
.minutes {
width: 100vw;
padding: 2vh 2vw 0;
display: flex;
justify-content: space-between;
}
.minute {
background: #fff;
height: 4.5vh;
flex-grow: 1;
border-radius: 1vw;
transition: background-color 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.minute:not(:last-child) {
margin-right: 0.5vw;
}
.minute[data-active="true"] {
background: #f00;
}
/* HOURS */
.hours {
width: 100vw;
padding: 2vh 2vw 3vh;
display: flex;
justify-content: space-between;
}
.hour {
background: #fff;
height: 4.5vh;
flex-grow: 1;
border-radius: 2vh;
transition: background-color 1s cubic-bezier(0.83, 0, 0.17, 1);
}
.hour:not(:last-child) {
margin-right: 1vw;
}
.hour[data-active="true"] {
background: #0f0;
}
/*
.seconds {
width: 100vw;
height: 100vh;
}
*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment