Mar 28, 2010

Dream Night Animation with Jquery

The DreamNight is a screen saver in my friend's cellphone, I tried to implement it on web with help of Jquery and CSS.

Idea

This is an animation in which colored bubbles appear on random positions, grow in size and then fade out. This effect really looks so cool.

Code

CSS
The Dreams are at the absolute position.

 
body{
 background:black;
 overflow:hidden;
}
.drawingpix { 
    position:absolute; 
    top:-50px; 
    left:-50px;
}
 

JavaScript: Jquery

 
//the function that creates dream
function dream(){
    //calculating random color of dream
    var color = 'rgb('+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+','+Math.floor(Math.random()*255)+')';

    //calculating random X position
    var x = Math.floor(Math.random()*$(window).width());

    //calculating random Y position
    var y = Math.floor(Math.random()*$(window).height());

    //creating the dream and hide
    drawingpix = $('<span>').attr({class: 'drawingpix'}).hide();

                            //appending it to body
                             $(document.body).append(drawingpix);

                             //styling dream.. filling colors.. positioning.. showing.. growing..fading
                             drawingpix.css({
                                            'background-color':color,
                                            'border-radius':'100px',
                                            '-moz-border-radius': '100px',
                                            '-webkit-border-radius': '100px',
                                            top: y-14,    //offsets
                                            left: x-14 //offsets
                                            }).show().animate({
                                                                height:'500px',
                                                                width:'500px',
                                                                'border-radius':'500px',
                                                                '-moz-border-radius': '500px',
                                                                '-webkit-border-radius': '500px',
                                                                opacity: 0.1,
                                                                top: y-250,    //offsets
                                                                left: x-250
                             }, 3000).fadeOut(2000);
                            
                           //Every dream's end starts a new dream
                             window.setTimeout('dream()',200);
 }

$(document).ready(function() {  

                     //calling the first dream
                     dream();
});

Demo

You can see it in action here.

Labels: Animation, css, Javascript, jquery

By : Motyar+ @motyar