Motyar

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: , , , , ,

By :

6 comments

#

Anonymous Philosopher, more than a wedding and says…

Thank you for your good work .. but where do I put the section mp3 .. and where are the files JavaScript files .. I hope that you put the link to be downloaded .. Regards

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

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

Blogger Dharmveer Motyar says…

@Philosopher take a look at http://motyar.blogspot.com/2010/07/play-sounds-on-web-with-soundmanager.html
 
#

OpenID larssonk says…

I've managed to get this working on my wordpress template, however I'd like to make it so it only happens when a page is loaded, not whenever there is a mouse click.

How can I do this (I have very limited knowledge of jscript, so a step by step guide like you have done with this tutorial would be very helpful).

Thanks
Larss
 
#

OpenID larssonk says…

I managed to sort it.

But I am having trouble implementing your soundmanager demo to my navigation menu. Any ideas??
 
#

Blogger prami says…

Hmmm, clicking on the demo link just open advertisment .....
 
#

Blogger Motyar D says…

@prami Oh thanks for letting me know. Actually that was on a free host (000space) , seems expired. Will put it on working one soon.

 

Post a Comment