Motyar

Creating value through Programming

Download local Business Data
GeoData
Download local businesses data as CSV

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({opacity0.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: , , , , ,


By :