There 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…
Download the files here.

Most Recent Posts

Special Recent Posts

Dribbble API: wandering the [known] unknowns

June 19th, 2013

Building responsive web designs and writing Sass is something I feel very confident with. However, w[...]

Embed your latest tweets on your website the API v1.1 way...or not

June 13th, 2013

A quick follow up of my "Quick and easy way to display tweets on a static website" blogpost in the w[...]

Update a Wordpress database table using Sequel Pro

June 12th, 2013

I'm getting more and more requests from bloggers wanting to move from their blogging platforms to a [...]

Alfred app custom searches: every minute counts

June 5th, 2013

If you're a designer like I am, even more if web design is your full-time activity, you probably do [...]

Not using Sass and Compass: WTF are you waiting for?!

May 30th, 2013

It's been almost a year I have been using Sass and Compass in my various web projects, and as I look[...]