Header Ads

  • Breaking News

    Analog Clock Using Css3 and Jquery



    Today we are going to see another great example of analog clock using the power of CSS3 and most advanced library jQuery. We will start by creating a very cool and realistic analog wall clock with pure CSS3 properties, and add a little smooth rotation for giving the clock hands a rotating effect.



















    The HTML
    <div id="clock">
        <div id="hour" style="transform: rotate(334.5deg);"><img src="http://demo.web3designs.com/images/ hourhand.png"></div>
        <div id="minute" style="transform: rotate(54deg);"><img src="http://demo.web3designs.com/images/ minhand.png"></div>
        <div id="second" style="transform: rotate(108deg);"><img src="http://demo.web3designs.com/images/ sechand.png"></div>
    </div>


    The CSS

    Now, It’s time to play with some cool css3 properties like transition, transform and css easing.


    #clock {
        background-image: url("http://demo.web3designs.com/images/clockBg.png");
        height: 200px;
        position: relative;
        width: 200px
    }
    #clock div {
        position: absolute;
        left:50%
    }
    #clock img[src*="second"] {
        transition: transform 600000s linear 0s;
    }
    #clock:target img[src*="second"] {
        transform: rotate(3600000deg);
    }
    #clock img[src*="minute"] {
        transition: transform 360000s linear 0s;
    }
    #clock:target img[src*="minute"] {
        transform: rotate(36000deg);
    }
    #clock img[src*="hour"] {
        transition: transform 216000s linear 0s;
    }
    #clock:target img[src*="hour"] {
        transform: rotate(360deg);
    }


    jQuery or Java-Script

    firstly we will include the most advanced jQuery library. After adding this powerful library we will use some line of custom java-script code for rotating three hands of clock i.e. Hour, Minute and Second. That’s it.



    function Clock_dg(prop) {
        var angle = 360/60,
            date = new Date();
            var h = date.getHours();
            if(h > 12) {
                h = h - 12;
            }

            hour = h;
            minute = date.getMinutes(),
            second = date.getSeconds(),
            hourAngle = (360/12) * hour + (360/(12*60)) * minute;

            $('#minute')[0].style[prop] = 'rotate('+angle * minute+'deg)';
            $('#second')[0].style[prop] = 'rotate('+angle * second+'deg)';
            $('#hour')[0].style[prop] = 'rotate('+hourAngle+'deg)';
    }
    $(function(){      
        var props = 'transform WebkitTransform MozTransform OTransform msTransform'.split(' '),
            prop,
            el = document.createElement('div');

        for(var i = 0, l = props.length; i < l; i++) {
            if(typeof el.style[props[i]] !== "undefined") {
                prop = props[i];
                break;
            }
        }
        setInterval(function(){
            Clock_dg(prop)
        },100);
    });


    BROWSER COMPATIBILITY:

    As we mentioned before, this technology is developed with jQuery so it is supported by almost all major browsers. it is possible that the syntax and behavior can be changed in future versions of browsers. For today, it is supported by next browsers:


    • Chrome 15+                                  
    • Firefox 9+
    • Safari 4+
    • IE9+
    • Opera 12+








    No comments

    Post Top Ad

    Post Bottom Ad