Jul 31, 2010

Camera Flash Effect with Jquery

If you are looking for animated effects with Jquery, you are at right place. Here are a lot of Jquery Special Effects you can implement on your own webpages. Today i am sharing such a special effect i have developed with Jquery, I am trying to implement the Camera Flash Effect with Jquery.

Idea

The idea behind this effect came from a flash web site, they are using just some sounds over buttons. I found a new thing to play sounds with JS on web
and made this effect with following steps -A white div(that is full screen) appears on mouse click(on mouseup) with a flash sound and fade out in given time.

Code

Include SoundManager for Sound

<script type='text/javascript' src='script/soundmanager.js'></script&gt;

<script type="text/javascript">soundManagerInit();</script> 

Learn more about it.

CSS

 
body{

    background:black;
}

.flashDiv{ 

    position:fixed; 
    top:0;

    left:0;

    width:100%;

    height:100%;

    background-color:#fff;

 }
 

JavaScript

function flash(e){

             $('.flashDiv')
             .show()  //show the hidden div
             .animate({opacity: 0.5}, 300) 
             .fadeOut(300)

             .css({'opacity': 1});

     //play the sound    

     soundManager.play('capture');
}

$(document).ready(function() {    
                $('.flashDiv').hide();  

                $(document).mouseup(function(e) { flash(e); })

});
 

HTML
Include this div to the body

<div class='flashDiv'></div>

Demo

You can see the working demo here. Go to the page and Click anywhere to generate the effect.

Related Articles

Top Jquery Animations

Labels: Animation, css, Flash, jquery, Sound, Tutorials

By : Motyar+ @motyar