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

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]

Comments

  1. mufti says:

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

  2. This is awesome! Thanks for sharing.

  3. Balaji says:

    wow! definitely my readers going to enjoy this :)

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