Camera Flash Effect With JQuery

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

 

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>