Building patanjali clock in pure css (Pun Intended)

The HTML
(just the bones)

 <div class="clock"></div>

The Moves
(Pranayam…the clock way…)

var cursorX;
var cursorY;
document.onmousemove = function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
    var x=document.createElement('div');

 var random= Math.floor((Math.random() * 3) + 1); 
 if(random==3){
 	x.className='second';
 	x.style.top=cursorY+'px';
 	x.style.left=cursorX+'px';
 }
 else if(random==10){
 	x.className='minute';
 	x.style.top=cursorY+'px';
 	x.style.left=cursorX+'px';
 }
 else if(random==25){
 	x.className='hour';
 	x.style.top=cursorY+'px';
 	x.style.left=cursorX+'px';
 }
document.querySelector('.clock').appendChild(x);
}

The Style
Lil bit of swaag 😉

body{
    overflow: hidden;
}
    .clock{
    width: 520px;
    height: auto;
    overflow: hidden;
    margin:  0 auto;
 }
.second{
    position: absolute;
}
.second{
    width: 118px;
    height: 96px;
    background:url('second.png');
    z-index: 3;
    top:510px;
    right:-80px;
    animation: second reverse linear 6s infinite;
}

@keyframes second{
    0%{
        transform: rotate(0deg);
    }
    0%{
        transform: rotate(180deg);
    }
    0%{
        transform: rotate(360deg);
    }
}
.drop{
    display: none;
}

here’s the result

See the Pen GjByBb by Sarabpreet Singh (@sarabpreet) on CodePen.light

PS: code may or may not make sense, since i was trying to build something else, will update code once i’m on it. 🙂

cheeers!!

About the author

sarabpreet

A DevSigner, Minimal, building this for next million users, the Creative lad at Gult Design. (https://gult.design))

Add comment

By sarabpreet

Latest from Sarabpreet