Skip to content

Instantly share code, notes, and snippets.

@Velicious

Velicious/Flat Clock.markdown

Created December 16, 2015 14:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Velicious/e50f3d6250b67c6b8367 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Velicious/e50f3d6250b67c6b8367 to your computer and use it in GitHub Desktop.
Download ZIP
Flat Clock
Raw
Flat Clock.markdown
Raw
index.html
<h1>Flat Design Clock</h1>
<div class="clock-wrap">
<div class="hour-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
<div class="min-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
<div class="sec-wrap">
<div class="digit-top">
<div class="front">00</div>
<div class="back">00</div>
</div>
<div class="digit-bottom">
<div class="front">00</div>
</div>
</div>
</div>
<a href="http://twitter.com/stevenfabre"m title="Twitter">@stevenfabre</a>
<a href="http://stevenfabre.com"m title="Twitter">stevenfabre.com</a>
Raw
script.js
Element.Properties.transform = {
set: function(transform){
var property = 'transform';
console.log(Browser);
if(Browser.chrome) property = 'WebkitTransform';
if(Browser.firefox) property = 'MozTransform';
if(Browser.opera) property = 'OTransform';
this.style[property] = transform;
this.store('transform', transform);
},
get: function(){
return this.retrieve('transform', '');
}
};
Element.implement({
setTransform: function(value){
return this.set('transform', value);
},
getTransform: function(){
return this.get('transform');
}
});
$(window).addEvent('domready', function()
{
var $hourWrap = $$('.hour-wrap');
var $hourFront = $hourWrap.getElement('div.front');
var $hourBack = $hourWrap.getElement('div.back')
var $hourTop = $hourWrap.getElement('div.digit-top');
var $hourBottom = $hourWrap.getElement('div.digit-bottom .front');
var $minWrap = $$('.min-wrap');
var $minFront = $minWrap.getElement('div.front');
var $minBack = $minWrap.getElement('div.back');
var $minTop = $minWrap.getElement('div.digit-top');
var $minBottom = $minWrap.getElement('div.digit-bottom .front');
var $secWrap = $$('.sec-wrap');
var $secFront = $secWrap.getElement('div.front');
var $secBack = $secWrap.getElement('div.back');
var $secTop = $secWrap.getElement('div.digit-top');
var $secBottom = $secWrap.getElement('div.digit-bottom .front');
var currentHour = 0;
var currentMin = 0;
var currentSec = 0;
var setClock = function()
{
var time = new Date();
var hour = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
if(currentHour != hour)
{
currentHour = hour;
var hourText = hour < 10 ? '0'+hour : hour;
// make el to sit behind the top digit
var $newHourTop = new Element('div', {class: 'digit-top', html: $hourTop.get('html'), style: 'z-index:1;'})
var $newHourFront = $newHourTop.getElement('div.front');
var $newHourBack = $newHourTop.getElement('div.back');
$newHourFront.set('text', hourText);
$hourWrap.adopt($newHourTop);
// start the animation
$hourFront.setTransform('rotateX(180deg)');
$hourBack.setTransform('rotateX(0deg)');
$hourBack.setStyle('zIndex', 40);
// set the min back
$hourBack.set('text', hourText);
(function()
{
$hourTop.destroy();
$hourFront.destroy();
$hourBack.destroy();
$hourTop = $newHourTop;
$hourFront = $newHourFront;
$hourBack = $newHourBack;
$hourTop.setStyle('zIndex', 10);
$hourBottom.set('text', hourText);
}).delay(800);
}
if(currentMin != min)
{
currentMin = min;
var minText = min < 10 ? '0'+min : min;
// make el to sit behind the top digit
var $newMinTop = new Element('div', {class: 'digit-top', html: $minTop.get('html'), style: 'z-index:1;'})
var $newMinFront = $newMinTop.getElement('div.front');
var $newMinBack = $newMinTop.getElement('div.back');
$newMinFront.set('text', minText);
$minWrap.adopt($newMinTop);
// start the animation
$minFront.setTransform('rotateX(180deg)');
$minBack.setTransform('rotateX(0deg)');
$minBack.setStyle('zIndex', 40);
// set the min back
$minBack.set('text', minText);
(function()
{
$minTop.destroy();
$minFront.destroy();
$minBack.destroy();
$minTop = $newMinTop;
$minFront = $newMinFront;
$minBack = $newMinBack;
$minTop.setStyle('zIndex', 10);
$minBottom.set('text', minText);
}).delay(800);
}
if(currentSec != sec)
{
currentSec = sec;
var secText = sec < 10 ? '0'+sec : sec;
// make el to sit behind the top digit
var $newSecTop = new Element('div', {class: 'digit-top', html: $secTop.get('html'), style: 'z-index:1;'})
var $newSecFront = $newSecTop.getElement('div.front');
var $newSecBack = $newSecTop.getElement('div.back');
$newSecFront.set('text', secText);
$secWrap.adopt($newSecTop);
// start the animation
$secFront.setTransform('rotateX(180deg)');
$secBack.setTransform('rotateX(0deg)');
$secBack.setStyle('zIndex', 40);
// set the min back
$secBack.set('text', secText);
(function()
{
$secTop.destroy();
$secFront.destroy();
$secBack.destroy();
$secTop = $newSecTop;
$secFront = $newSecFront;
$secBack = $newSecBack;
$secTop.setStyle('zIndex', 10);
$secBottom.set('text', secText);
}).delay(800);
}
//$hourEls.set('text', hour);
}
setClock.periodical(1000);
});
Raw
scripts
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
Raw
style.css
@import "compass/css3";
@import url(http://fonts.googleapis.com/css?family=Pathway+Gothic+One);
$green:#16a085;
$grey:#ededed;
body{
padding:0px;
margin:0px;
background-color:$green;
-webkit-font-smoothing: antialiased;
text-align:center;
}
h1 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:300;
font-size:40px;
color:#ffffff;
margin: 30px 0 0 0;
text-align:center;
}
a {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color:#fff;
text-decoration:none;
display:block;
margin:15px auto 0 auto;
text-align:center;
}
.clock-wrap{
width:610px;
font-family: 'Pathway Gothic One', sans-serif;
height:200px;
margin:20px auto 30px auto;
padding:15px;
}
.min-wrap,
.hour-wrap, .sec-wrap{
width:200px;
height:200px;
float:left;
position: relative;
}
.min-wrap, .sec-wrap{
margin-left: 4px;
}
.digit-top,
.digit-bottom{
width:200px;
height:100px;
position: absolute;
}
.clock-wrap .front, .clock-wrap .back{
width: 200px;
height: 100px;
position: absolute;
overflow: hidden;
background:#ffffff;
color:$green;
text-align: center;
font-size: 150px;
transition: transform 800ms, z-index 800ms;
-moz-transition: -moz-transform 800ms, z-index 800ms;
-webkit-transition: -webkit-transform 800ms, z-index 800ms;
-o-transition: -o-transform 800ms, z-index 800ms;
-webkit-transform-style: preserve-3d;
}
.clock-wrap .front{
z-index: 30;
transform-origin: 0px 100px;
-webkit-transform-origin: 0px 100px;
-moz-transform-origin: 0px 100px;
-o-transform-origin: 0px 100px;
transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
backface-visibility: hidden;
}
.clock-wrap .back{
z-index: 20;
top:100px;
transform-origin: 0px 0;
-webkit-transform-origin: 0px 0;
-moz-transform-origin: 0px 0;
-o-transform-origin: 0px 0;
transform: rotateX(180deg);
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
backface-visibility: hidden;
line-height:0;
}
.digit-top{
line-height:200px;
top:0;
z-index: 10;
}
.digit-bottom{
top: 100px;
line-height:0;
z-index: 0;
background:lighten($grey,20);
}
.hour-wrap:before, .min-wrap:before, .sec-wrap:before {
content:"";
background:#000000;
opacity:0.04;
position:absolute;
width:200px;
height:100px;
top:0;
left:0;
z-index:9999;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment