@motyar

I'm Motyar, an entrepreneur and API developer from India

Creating value through Programming

FREE VPS for 2 months
DigitalOcean
Cloud hosting for developers
20GB SSD, 512MB RAM - only $5 per month

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 :