JavaScript Animated Analog Clock Design

by

This is another analog clock example using HTML, CSS and JavaScript. With a green background, the clock looks likes it is hanging in the wall. At the very first glance, the clock’s hand is stuck at 12:00. But on snap, it changes to the real time.You can use this one for sure into your website or any web based projects.
JavaScript Animated Analog Clock Design

HTML





    
        
    
    
        
    


    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    1
    
    2
    
    3
    
    4
    
    5
    
    6
    
    7
    
    8
    
    9
    
    10
    
    11
    
    12


CSS

body{
  background: #39BF5F;
  margin: 100px;
}
svg{
  display: block;
  margin: auto;
}


JS

var s = Snap(document.getElementById("clock"));

        var seconds = s.select("#seconds"),
            minutes = s.select("#minutes"),
            hours   = s.select("#hours"),
            rim     = s.select("#rim"), 
            face    = {
              elem: s.select("#face"),
              cx: s.select("#face").getBBox().cx,
              cy: s.select("#face").getBBox().cy,
            },
            angle   = 0,
            easing = function(a) {
              return a==!!a?a:Math.pow(4,-10*a)*Math.sin((a-.075)*2*Math.PI/.3)+1;
            };

        var sshadow = seconds.clone(),
            mshadow = minutes.clone(),
            hshadow = hours.clone(),
            rshadow = rim.clone(),
            shadows = [sshadow, mshadow, hshadow];

        //Insert shadows before their respective opaque pals
        seconds.before(sshadow);
        minutes.before(mshadow);
        hours.before(hshadow);
        rim.before(rshadow);

        //Create a filter to make a blurry black version of a thing
        var filter = Snap.filter.blur(0.1) + Snap.filter.brightness(0);

        //Add the filter, shift and opacity to each of the shadows
        shadows.forEach(function(el){
            el.attr({
                transform: "translate(0, 2)",
                opacity: 0.2,
                filter: s.filter(filter)
            });
        })

        rshadow.attr({
            transform: "translate(0, 8) ",
      opacity: 0.5,
            filter: s.filter(Snap.filter.blur(0, 8)+Snap.filter.brightness(0)),
        })

        function update() {
          var time = new Date();
          setHours(time);
          setMinutes(time);
          setSeconds(time);
        }

        function setHours(t) {
          var hour = t.getHours();
          hour %= 12;
          hour += Math.floor(t.getMinutes()/10)/6;
          var angle = hour*360/12;
          hours.animate(
            {transform: "rotate("+angle+" 244 251)"},
            100,
            mina.linear,
            function(){
              if (angle === 360){
                hours.attr({transform: "rotate("+0+" "+face.cx+" "+face.cy+")"});
                hshadow.attr({transform: "translate(0, 2) rotate("+0+" "+face.cx+" "+face.cy+2+")"});
              }
            }
          );
          hshadow.animate(
            {transform: "translate(0, 2) rotate("+angle+" "+face.cx+" "+face.cy+2+")"},
            100,
            mina.linear
          );
        }
        function setMinutes(t) {
          var minute = t.getMinutes();
          minute %= 60;
          minute += Math.floor(t.getSeconds()/10)/6;
          var angle = minute*360/60;
          minutes.animate(
            {transform: "rotate("+angle+" "+face.cx+" "+face.cy+")"},
            100,
            mina.linear,
            function(){
              if (angle === 360){
                minutes.attr({transform: "rotate("+0+" "+face.cx+" "+face.cy+")"});
                mshadow.attr({transform: "translate(0, 2) rotate("+0+" "+face.cx+" "+face.cy+2+")"});
              }
            }
          );
          mshadow.animate(
            {transform: "translate(0, 2) rotate("+angle+" "+face.cx+" "+face.cy+2+")"},
            100,
            mina.linear
          );
        }
        function setSeconds(t) {
          t = t.getSeconds();
          t %= 60;
          var angle = t*360/60;
          //if ticking over to 0 seconds, animate angle to 360 and then switch angle to 0
          if (angle === 0) angle = 360;
          seconds.animate(
            {transform: "rotate("+angle+" "+face.cx+" "+face.cy+")"},
            600,
            easing,
            function(){
              if (angle === 360){
                seconds.attr({transform: "rotate("+0+" "+face.cx+" "+face.cy+")"});
                sshadow.attr({transform: "translate(0, 2) rotate("+0+" "+face.cx+" "+face.cy+2+")"});
              }
            }
          );
          sshadow.animate(
            {transform: "translate(0, 2) rotate("+angle+" "+face.cx+" "+face.cy+2+")"},
            600,
            easing
          );
        }
        setInterval(update, 1000);

See live demo and download source code.
|

Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.

This awesome script developed by rodnylobos. Visit their official repository for more information and follow for future updates.

Published by Rohit