Skip to content

Instantly share code, notes, and snippets.

@shshaw
Created July 17, 2020 11:11
Show Gist options
  • Save shshaw/bb4f3cefdc1a5e0a082defdeb4c590d8 to your computer and use it in GitHub Desktop.
Save shshaw/bb4f3cefdc1a5e0a082defdeb4c590d8 to your computer and use it in GitHub Desktop.
Splitting: 3D Clock
<div class="clock">
<span class="cog hours tens" data-splitting>0123456789</span>
<span class="cog hours" data-splitting>0123456789</span>
<span class="colon">:</span>
<span class="cog minutes tens" data-splitting>0123456789</span>
<span class="cog minutes" data-splitting>0123456789</span>
<span class="colon">:</span>
<span class="cog seconds tens" data-splitting>0123456789</span>
<span class="cog seconds" data-splitting>0123456789</span>
</div>
console.clear();
Splitting();
var clock = document.querySelector('.clock');
/* We need zero-led values to help with the tens columns, and to allow for better looping around when reaching '9' */
function leadingZeroString(n){
return ('0' + n).slice(-2);
}
function updateTime(){
var d = new Date();
var h = leadingZeroString(d.getHours());
var m = leadingZeroString(d.getMinutes());
var s = leadingZeroString(d.getSeconds());
clock.style.setProperty('--h1', h[0]);
clock.style.setProperty('--h2', h);
clock.style.setProperty('--m1', m[0]);
clock.style.setProperty('--m2', m);
clock.style.setProperty('--s1', s[0]);
clock.style.setProperty('--s2', s);
//var t = new Date().toTimeString();
// clock.style.setProperty('--h1', t[0]);
// clock.style.setProperty('--h2', t[1]);
// clock.style.setProperty('--m1', t[3]);
// clock.style.setProperty('--m2', t[4]);
// clock.style.setProperty('--s1', t[5]);
// clock.style.setProperty('--s2', t[6]);
}
updateTime();
setInterval(updateTime, 1000);
<script src="https://unpkg.com/splitting@next/dist/splitting.js"></script>
$bg: #222;
$color: #F1F1F1;
html, body { background: $bg; }
html { height: 100%; display: flex; }
body {
margin: auto;
width: 100%;
overflow: hidden;
}
@import url('https://fonts.googleapis.com/css?family=Oswald:700');
.clock {
--time-offset: 0;
width: 100%;
height: 100%;
background: rgba($bg,0.8);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
height: 6em;
color: $color;
font-family: monospace;
font-size: 8vw;
font-family: 'Oswald', sans-serif;
letter-spacing: 0.1em;
perspective: 600px;
--h1: 1;
--h2: 2;
--m1: 3;
--m2: 4;
--s1: 5;
--s2: 6;
&,
&:before,
*,{
box-sizing: border-box;
transform-style: preserve-3d;
}
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba($bg,.9) 20%, transparent calc(50% - .4ch), transparent calc(50% + .4ch), rgba($bg,.9) 80%);
transform: translateZ(2.6em);
}
}
.colon {
display: inline-block;
opacity: 0.8;
transform: translateZ(2.5em);
width: 1ch;
margin: 0;
text-align: center;
}
.cog {
position: relative;
width: 1ch;
height: 1ch;
margin: -.25ch .1ch 0;
display: inline-block;
// --unit: 2;
transition: transform .3s cubic-bezier(.4, 0, .6, 1);
transform: rotateX(
calc(
-1turn *
(var(--unit) / var(--char-total))
)
) ;
.word,
.char {
position: absolute;
top: 0%;
left: 0%;
width: 1ch;
height: 1ch;
}
.char {
transform:
//translate(-50%, -50%)
rotateX( calc( 4deg + (360deg * var(--char-percent) )) )
//rotateX( calc( 165deg + (162deg * var(--distance-sine)) ) )
translateZ( 2.5em );
// translateZ( calc( 0.25em * var(--char-total) ) );
}
}
.tens { text-align: right; }
.hours.tens { --unit: var(--h1); }
.hours { --unit: var(--h2); }
.minutes.tens { --unit: var(--m1); }
.minutes { --unit: var(--m2); }
.seconds.tens { --unit: var(--s1); }
.seconds { --unit: var(--s2); }
<link href="https://lucid-northcutt-877344.netlify.com/dist/splitting.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment