Animated Clock

An Animated Clock with Custom Css by Santosh Kumar Mohanty

by Santosh Mohanty

HTML

<div id="date"></div>
<div id="santaClock"></div>
<br />
<br />
<br />
<br />
<br />
<br/>
<div>&copy Santosh Kumar Mohanty</div>

CSS

.webclock {
    /* The .webclock div. Created dynamically by jQuery */
    background-color:#FFFFFF;
    height:100px;
    width:100px;
    position:relative;
    overflow:hidden;
    float:left;
}
.webclock .rotate {
    /* There are two .rotate divs - one for each half of the background */
    position:absolute;
    width:100px;
    height:100px;
    top:0;
    left:0;
}
.rotate.right {
    display:none;
    z-index:11;
}
/*.webclock .bg, .webclock .front{*/

/*width:500px;*/

/*height:100px;*/

/*background-color:#252525;*/

/*position:absolute;*/

/*top:0;*/

/*}*/
 .webclock .bg, .webclock .front {
    width:50px;
    height:100px;
    background-color:#FFFFFF;
    position:absolute;
    top:0;
}
.webclock .display {
    color: #F5F5F5;
    font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 10px;
    left: 0;
    position: absolute;
    text-align: center;
    text-shadow: 2px 2px 2px;
    top: 44px;
    width: 100px;
    z-index:20;
}
/* The left part of the background: */
 .webclock .bg.left {
    left:0;
}
/* Individual styles for each color: */
 .orange .bg.left {
    background:url("http://s24.postimg.org/btx8pqf1d/orange.png") no-repeat left top;
}
.green .bg.left {
    background:url("http://s24.postimg.org/xf2bdcbs1/green.png") no-repeat left top;
}
.blue .bg.left {
    background:url("http://s24.postimg.org/ujp86h7s1/blue.png") no-repeat left top;
}
/* The right part of the background: */
 .webclock .bg.right {
    left:50px;
}
.orange .bg.right {
    background:url("http://s24.postimg.org/btx8pqf1d/orange.png") no-repeat right top;
}
.green .bg.right {
    background:url("http://s24.postimg.org/xf2bdcbs1/green.png") no-repeat right top;
}
.blue .bg.right {
    background:url("http://s24.postimg.org/ujp86h7s1/blue.png") no-repeat right top;
}
.webclock .front.left {
    left:0;
    z-index:10;
}

JavaScript

/*!
  jquery.webClock.js
 */
(function ($) {

    var gVars = {}; // Global Array for rotating Clock

    // extending jquery core library to add a function named webClock():
    $.fn.webClock = function (opts) {
        var container = this.eq(0);
        if (!container) {
            try {
                console.log("Please Select a Valid Selector");
            } catch (e) {}

            return false;
        }

        if (!opts) opts = {};

        var defaults = {}; // add defaults if needed

        /* Merging the provided options with the default ones (will be used in future versions of the plugin): */
        $.each(defaults, function (k, v) {
            opts[k] = opts[k] || defaults[k];
        })
        // Calling the setUp function and passing the container,
        // will be available to the setUp function as "this":
        setUp.call(container);

        return this;
    }

    function setUp() {
        // The colors of the dials:
        var colors = ['orange', 'blue', 'green'];

        var hand;

        for (var i = 0; i < 3; i++) {
            // Creating a new element and setting the color as a class name:

            hand = $('<div>').attr('class', colors[i] + ' webclock').html(
                '<div class="display"></div>' +

                '<div class="front left"></div>' +

                '<div class="rotate left">' +
                '<div class="bg left"></div>' +
                '</div>' +

                '<div class="rotate right">' +
                '<div class="bg right"></div>' +
                '</div>');

            // Appending to the container:
            $(this).append(hand);

            // Assigning some of the elements as variables for speed:
            hand.rotateLeft = hand.find('.rotate.left');
            hand.rotateRight = hand.find('.rotate.right');
            hand.display = hand.find('.display');

            // Adding the dial as a global variable. Will be available as gVars.colorName
           ...