Motyar

@motyar

Freelance Web Developer

Static Web Hosting, made easy

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 Math.floor(Math.random()*$(window).width());

    //calculating random Y position
    var 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',
                                            topy-14,    //offsets
                                            leftx-14 //offsets
                                            }).show().animate({
                                                                height:'500px',
                                                                width:'500px',
                                                                'border-radius':'500px',
                                                                '-moz-border-radius''500px',
                                                                '-webkit-border-radius''500px',
                                                                opacity0.1,
                                                                topy-250,    //offsets
                                                                leftx-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: , , ,




By :