Dr. Strangelove, 1964 HTML Poster

Dr. Strangelove, 1964 HTML Poster

So before you open this one, I want you to pick a music track to play. Either the original bombing run music from the Dr. Strangelove soundtrack, or if you want something a bit more thrilling – Ride Of The Valkyries which was played with devastating effect during the helicopter beach attack in Apocalypse Now.

Press play on your choice then click the poster link, it will open in a new tab. Then just listen, and wait for it.

The planes just keep coming and coming – beautiful bombers delivering all those beautiful atomic bombs. Ahhh, don’t you just love the end of the world? The smell of napalm in the morning? Hurrah! Hurrah!

This poster deserved a soundtrack. Did you have a preference? Are you more of a Colonel Kilgore – in the face of battle you tear your shirt off, stand tall with mortars exploding about you, get out the surfboards and smell victory in the air? Or the more stoic, bit of a good ol’ boy Major Kong – probably just one of the guys from Stalag 17 who post dubya-dubya-two just had to re-enlist and get back to flying for the U-S-A.

Dr. Strangelove is one of three war movies made by Stanley Kubrick, the others being the earlier Paths of Glory and the later Full Metal Jacket. He covers what might be two broad categories of anti-war films – the morality play vs. the satire. I’m a big fan of both – movies like PlatoonApocalypse Now, and Das Boot fitting in the former and M*A*S*HCatch-22, and Stalag 17 fitting the later. And for more recent fair I’d include last year’s endlessly haunting single camera 1917 and the revisionist history killin’ Nazi business found in Inglourious Basterds.

I’m less able to watch the dramas these days where I seem to now more directly feel the psychological and physical toll endured by soldiers and civilians. In my youth, I used to inhale those movies unfazed but now while watching 1917 I was left exhausted and traumatized. The tension created by the endless claustrophobic trenches, the unsettling traversal of No Man’s Land, and the stress building and building until – BOOM a big stupid rat sets off a boobytrap burying a soldier and I’m jumping out of my seat, a wreck.

But Dr. Strangelove is endlessly re-watchable. There’s just so much humor that flew over my head when I first saw this film. And now I can appreciate the misguided attempts to protect corporation rights, the playground scuffle, and the endlessly entertaining four-minute phone call monologue as President Muffley tries to placate Premier Kissov. “I’m just calling up to tell you something terrible has happened…” Actor Peter Seller’s patience with a self-absorbed autocrat could be very useful right now I think.

On the technical side, this poster used JavaScript to create all the planes in the animation. There’s actually 98 of them, though most are really tiny and moving slowly to create the illusion of them approaching from the distance. Only four JPGs were needed – a center plane with three flanking on the right and a mirror three flanking on the left. And CSS does almost all the animation work. But each img element is created, modified, and then added to the DOM using a favorite JS development pattern.

First, there is a makePlane(num) function that uses any of the seven plane position numbers -3 through 3 to build img elements. This manages the first two parts of the pattern creating the element and then modifying it in a number of ways – setting the image source, adding classes, inline animation styles, and an alt tag value. The function then returns the finished img element:

const makePlane = (num) => {
  let plane = document.createElement('img');
  plane.setAttribute('src', `img/plane${Math.abs(num)}.png`);
  plane.setAttribute('alt', 'b52 bomber flying');
  plane.setAttribute('class', `poster_planes--${num}`);
  plane.classList.add('poster_planes');
  plane.style.animation = `${numPlanes}s cubic-bezier(1, 0, .90, 0) 0s infinite normal forwards running plane${num}motion`;
  return plane;
};

The final part of the pattern is to attach the created img element to the DOM using appendChild(el) to the parent div.poster_globe. This div element nests all 98 plane img elements as immediate children. A loop repeatedly calls poster.appendChild(makePlane(num)) with delays between each set of planes added using a setTimeOut():

setTimeout(() => {
  for (let i = 0; i < numPlanes; i++) {
    setTimeout(() => {
      poster.appendChild(makePlane(0));
      poster.appendChild(makePlane(2));
      poster.appendChild(makePlane(-2));
    }, 1000 * i);
  }
}, 500);

for (let i = 0; i < numPlanes; i++) {
  setTimeout(() => {
    poster.appendChild(makePlane(1));
    poster.appendChild(makePlane(-1));
    poster.appendChild(makePlane(3));
    poster.appendChild(makePlane(-3));
  }, 1000 * i);
}

There are some issues with this approach to animating. I noticed that if you open the page in a new tab without it being immediately visible, a bunch of the created planes are stacked atop one another. Basically, JS made the planes but the CSS animation didn’t start until the window was visible. There’s definitely a lot to learn about how to manage animations and possibly moving the delays to CSS allowing all the images to be made at once with JS.

More posters to come so next time!


Posted

in

, ,

by

Tags:

Comments

5 responses to “Dr. Strangelove, 1964 HTML Poster”

  1. Paul Avatar
    Paul

    There you go raising the bar for the rest of us again. Dammit. Now I have to learn CSS and javascript just to keep up. Seriously though, this is awesome. #ds106 #4life

    1. mbransons Avatar

      Thanks, it’s been fun to learn new HTML/CSS/JS skills and figure out what to do with them!

  2. Jim Groom Avatar

    I second Paul, this is amazing, and listening to the music then watching the animation gave me chills. A real blurring between the action of the movie and the ability to capture that in the poster. Brilliante!

  3. […] I’m looking forward to rebuilding the Dr. Strangelove poster using GreenSock and I think I might be able to turn the animation into an actual shooting game. […]

  4. […] truly relish the opportunity given he’s so damned good! I have had his HTML/CSS/JS animated movie posters in my head for a few months now, so when the discussion came around to building out the […]