by Flo Preynat

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)

Create a movie intro with jquery

 

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:

 

Photoshop job

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).

 

CSS job

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

 

jQuery job

 

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.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Make Google Charts responsive

Make Google Charts responsive

March 19th, 2014

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rock[...]

Codekit 2 : even more steroids for us web developers

Codekit 2 : even more steroids for us web developers

March 17th, 2014

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check[...]

Open terminal from folder in finder

Open terminal from folder in finder

January 27th, 2014

A quick one nudged my way by Adrien Joly this morning. You can now open a terminal window from a [...]

A look back at Wordcamp Paris 2014

A look back at Wordcamp Paris 2014

January 22nd, 2014

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Satur[...]

Gruntjs Boilerplate: my dummy-proof step-by-step guide

Gruntjs Boilerplate: my dummy-proof step-by-step guide

January 14th, 2014

Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]

Comments

  1. mufti says:

    Awesome!, just featured your post on blogfreakz.com.

  2. Gabe Rosser says:

    This is awesome! Thanks for sharing.

  3. Balaji says:

    wow! definitely my readers going to enjoy this :)

  4. Michael Pehl says:

    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

  5. bp says:

    Thanks for sharing. This is really awesome. Can u pls share the code for this

  6. lee says:

    Brilliant, I think you have single handedly taken jquery to the next level. Very cool. I too would love to have this code.

  7. Ankur Samadhiya says:

    Cool!!!

    May I have this? I am learning to design web. It will help me to understand process better.

  8. omar says:

    anyway to autoplay?

  9. Ann says:

    Found another CSS James Bond introduction –

    http://www.thingography.com/animation/bond

    It uses CSS only with one png image.