if you tweet
if you dribbbleThere are many examples of people having a go at animations without the use of video editing techniques, or flash on the web. And recreational activities being part of my daily schedule, I decided to challenge myself with a little one of those animation attempts, hoping to be able to recreate the well-known James Bond Intro with nothing but:
- a bit of Photoshop
- some CSS
- a few basic jQuery effects (no extra plugin needed, but the standard library)
I pushed the challenge a bit further by restricting the number of jQuery effects to a mere 3, being:
- fade(In or Out)
- animate
- delay
As a side-comment, let me point out that people often underestimate the power the delay effect. I absolutely love it.
Anyway, cutting a long story short, and attempting not to bore you with unnecessary details, here’s how I proceded…
Photoshop
I created the pictures needed for my animation, being:
- a white dot for my pre-intro needs
- a “Shoogle designs presents” label
- a gun barrel inner view
- a james bond character
- and some blood layer with semi-opacity
All thrown on a piece of paper (do not mind the scales), it would look something like that:
CSS
Place a #video div in the middle, with overflow set to hidden…
#video {
width: 560px;
height: 300px;
position:fixed;
background-color:#000000;
margin-top: 150px;
overflow: hidden;
}
And set as many divs as you need for all your layers. Note that all my background images are set to PNG for opacity or see-through effects purposes.
All positions are set for the divs’ stating positions (before the jQuery takes over).
jQuery
As mentioned above, nothing but fade, animate and delay effects are permitted.
So we need a starting point, which is going to be the initial click on the toggle element (here the 007 gun, which will disappear once clicked by the way).
Then the animation and its sequence takes over.
Note that the sequence of events and effects is only timed by the delay feature. It doesn’t take much time to get it right if im honest with you. I let you go over the following code and its manual annotations yourselves, .
For your info, I used jPlayer for the background music. I’ve just realized that, for some reason, it doesn’t seem to be playing the tune when using IE8. Don’t have the time, nor the will to check out why. Let me rephrase, as this is only a wee game I’m playing, I don’t really give a f**k it doesn’t run best on IE, but if you know why, then don’t hesitate to leave me a comment.
For the rest of you’s (firefox, safari, chrome etc…users), it should work pretty good, and you should hear some james bond music playing. This obviously kicks in when you click on the icon, like the rest of the animation.
Also note that I had to modify the jPlayer settings so it pauses after having played the tune once:
.jPlayer("onSoundComplete", function() {
this.element.jPlayer("pause");
This is it people, hope you enjoyed this little post of mine.
Leave a comment if you have. Follow me for more adventures in the future, and play the animation more than once, as it is a bit jumpy the first time round…
Awesome!, just featured your post on blogfreakz.com.
This is awesome! Thanks for sharing.
wow! definitely my readers going to enjoy this
can i download this for free because i am doing a bond movie and i need a intro
Hi Rhys, yes no probs. i can send you a package of the whole thing…
This is quite nice, mate. Well done, if I need an intro I’ll give you a shout.
Sorry for not responding/RT’ing at the moment, I am in germany, -11 degrees, preparing for the party with 50 peoples…
5th January I am back on Mallorca, will let you know.
Regards,
Michael
Thanks for sharing. This is really awesome. Can u pls share the code for this
Hi Bindu,
thanks for the praise.
im sending you the package now.
rgds,
Brilliant, I think you have single handedly taken jquery to the next level. Very cool. I too would love to have this code.
Thanks Lee, i will send it to you by email.