Freelance Web Developer

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.


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.


Include SoundManager for Sound

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

<script type="text/javascript">soundManagerInit();</script> 
Learn more about it.


    position:fixed    top:0;


function flash(e){
             .show()  //show the hidden div
             .animate({opacity0.5}, 300) 

     //play the sound'capture');

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


Include this div to the body

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


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

Related Articles

Top Jquery Animations

Labels: , , , , ,

If anything helps, feel free to buy me a beer.

By :