Click the CLOCK to change the style.
Forked from Vicio Bonura's Pen Rotating Clock.
A Pen by Stan Williams on CodePen.
<h1 class="off">C<span>LOCK</span></h1> | |
<div id="clock"> | |
<ul id="s"> | |
</ul> | |
<ul id="m"> | |
</ul> | |
<ul id="h"> | |
</ul> | |
</div> |
Click the CLOCK to change the style.
Forked from Vicio Bonura's Pen Rotating Clock.
A Pen by Stan Williams on CodePen.
function draw(){ | |
for(i=0;i<60;i++){ | |
D = (i<10) ? '0'+i : i; | |
$('#s').append('<li data-item='+D+'>'+D+'</li>'); | |
} | |
for(i=0;i<60;i++){ | |
D = (i<10) ? '0'+i : i; | |
$('#m').append('<li data-item='+D+'>'+D+'</li>'); | |
} | |
for(i=0;i<24;i++){ | |
D = (i<10) ? '0'+i : i; | |
$('#h').append('<li data-item='+D+'>'+D+'</li>'); | |
} | |
} | |
function place(){ | |
hdeg = 15; | |
msdeg = 6; | |
$('#s li').each(function(index){ | |
$(this).css({transform: 'rotateZ('+msdeg * index +'deg) translateX('+ parseInt(200) +'px)'}); | |
}); | |
$('#m li').each(function(index){ | |
$(this).css({transform: 'rotateZ('+msdeg * index +'deg) translateX('+ parseInt(170) +'px)'}); | |
}); | |
$('#h li').each(function(index){ | |
$(this).css({transform: 'rotateZ('+hdeg * index +'deg) translateX('+ parseInt(140) +'px)'}); | |
}); | |
} | |
//TIMER | |
function sec(ts,timer){ | |
TS = ts % 60; | |
if(ts == 0 && timer) min(0,timer); | |
deg = 360/60 * ts; | |
$('#s li').removeClass('active'); | |
$('#s li').eq(TS).addClass('active'); | |
$('#s').css({transform: 'rotateZ(-'+deg+'deg)'}); | |
ts++; | |
if(timer) setTimeout(function(){sec(ts,timer)},TIME * 1000); | |
} | |
function min(tm,timer){ | |
TM = tm % 60; | |
if(tm == 0 && timer) hour(0,timer); | |
deg = 360/60 * tm; | |
$('#m li').removeClass('active'); | |
$('#m li').eq(TM).addClass('active'); | |
$('#m').css({transform: 'rotateZ(-'+deg+'deg)'}); | |
tm++; | |
if(timer) setTimeout(function(){min(tm,timer)}, TIME * 60000); | |
} | |
function hour(th,timer){ | |
TH = th % 24; | |
deg = 360/24 * th; | |
$('#h li').removeClass('active'); | |
$('#h li').eq(TH).addClass('active'); | |
$('#h').css({transform: 'rotateZ(-'+deg+'deg)'}); | |
th++; | |
if(timer) setTimeout(function(){hour(th,timer)}, TIME * 3600000); | |
} | |
//CLOCK | |
function clock(){ | |
d = new Date(); | |
H = d.getHours(); | |
M = d.getMinutes(); | |
S = d.getSeconds(); | |
hour(H,0); | |
min(M,0); | |
sec(S,0); | |
setTimeout(function(){clock();},1000); | |
} | |
$(document).ready(function(){ | |
draw(); | |
place(); | |
//TIMER | |
/* | |
TIME = 1; | |
sec(0,1); | |
*/ | |
//CLOCK | |
clock(); | |
//LIGHT | |
$("h1").click(function(){ | |
$(this).toggleClass('off'); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> |
*,*::after,*::before { | |
box-sizing:border-box; | |
} | |
body { | |
margin: 0; | |
width: 100vw; | |
height: 100vh; | |
background: radial-gradient(circle at 50% 50%, #eeeeee 0%, #333 100%); | |
font-family: 'PT Mono'; | |
} | |
h1 { | |
margin: 0; | |
font-family: 'Montserrat'; | |
position:absolute;top:50%;left:50%; | |
height:200px;width:200px;;text-align:center;line-height:200px;font-size:200px; | |
font-weight: 400; | |
color: rgba(230,230,230,1); | |
text-shadow: 0 0px 50px rgba(255,255,255,.75), 0 0px 150px rgba(255,255,255,0.5), 0 0px 200px rgba(255,255,255,0); | |
transform: translate(-55%, -50%); | |
transform-origin: 50%; | |
cursor: pointer; | |
z-index: 100; | |
transition: all .25s; | |
} | |
h1.off { | |
color: transparent; | |
text-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.15); | |
} | |
h1 span { | |
font-size: 30px; | |
display: block; | |
position:absolute; | |
top: 0; | |
left: 120px; | |
} | |
#clock { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 460px; | |
height: 460px; | |
border-radius: 50%; | |
transform: translate(-50%, -50%); | |
z-index: 1 | |
} | |
h1.off + #clock { | |
background-image: linear-gradient(60deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,.25) 55%, rgba(255,255,255,.35) 55.5%, rgba(255,255,255,0.3) 60%, rgba(255,255,255,0.2) 68%, rgba(255,255,255,0.1) 72%, rgba(255,255,255,0.25) 75%, rgba(255,255,255,0) 100%), radial-gradient(circle at 50% 10%, rgba(180,180,180,1) 0%, rgba(140,140,140,1) 80%); | |
box-shadow: inset 0 10px 10px 0px rgba(0,0,0,0.35), inset 0 -3px 1px rgba(222,220,210,1), 0 1px 0 1px rgba(255,255,255,0.5), 0 0 0px 10px rgba(222,98,0,.3), 0 0 0 11px rgba(255,255,255,0.5), 0 30px 50px 20px rgba(0,0,0,0.5); | |
} | |
#clock::after{ | |
content: ''; | |
position: absolute; | |
border: 1px solid #000; | |
width: 100px; | |
height:30px; | |
transition-origin: 50%; | |
top: 50%; | |
left: 50%; | |
box-shadow: inset 0 0 20px 0px rgba(255,255,255,1), 0 0 100px 1000px rgba(0,0,0,0.75); | |
transition: all .5s; | |
transform: translate(120px, -50%) | |
} | |
#clock::before { | |
content: ''; | |
position:absolute; | |
border: 1px dashed #000; | |
border-top:0; | |
border-bottom: 0; | |
width:30px;height:10px; | |
right:0; | |
top:50%; | |
margin: -5px 44px 0 0; | |
animation: pulse 1s infinite; | |
} | |
h1.off + #clock::after { | |
box-shadow: 0 0 100px 1000px rgba(0,0,0,0), 0 0px 1px rgba(0,0,0,0.25); | |
background: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.15) 100%); | |
border: 1px solid rgba(0,0,0,0); | |
border-bottom: 1px solid rgba(0,0,0,0.15); | |
border-radius: 4px; | |
} | |
h1.off + #clock::before { | |
border: 1px dashed rgba(80,80,80,1); | |
border-top:0;border-bottom: 0; | |
opacity: 1; | |
animation: none; | |
} | |
ul { | |
position: absolute; | |
margin: 0; | |
padding: 0; | |
top: 50%; | |
left: 50%; | |
width: 20px; | |
height: 20px; | |
list-style: none; | |
margin: -10px 0 0 -10px; | |
} | |
#s,#m,#h { | |
transform: rotateZ(0deg); | |
transition: all .5s cubic-bezier(0.5, -0.5, 0.500, 1.5); | |
} | |
li { | |
position: absolute; | |
transition: all .25s; | |
width: 20px; | |
height: 20px; | |
line-height: 20px; | |
text-align: right; | |
opacity: 0.2; | |
transform-origin: 50%; | |
transition: all .25s linear .25s | |
} | |
li::after { | |
} | |
li.active { | |
color: #424242; | |
opacity: 1; | |
font-weight: 700; | |
font-size: 18px; | |
} | |
@keyframes pulse { | |
0%,50% { | |
opacity: 1 | |
} | |
51%,100% { | |
opacity: 0 | |
} | |
} |
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" /> | |
<link href="https://fonts.googleapis.com/css?family=PT+Mono" rel="stylesheet" /> |