Click here to watch CSS animation inspired from Mad Men show opening credits. いくつかの簡単な GPU 最適化および一度読み込んだら自動的に再生するように更新しました。 YouTube のオリジナルのオープニング クレジットと CSS アニメーションを比較してみてください。
— UPDATED: 2020 年 1 月 31 日

You Call This Inspiration?

Don Draper がオフィスに入ってくるのを想像してください。 手にはスーツケースが揺れています。 彼の真新しいアディダスは、磨かれた床でキーキーと音を立てています……え！？ アディダス？

私はアディダスが大好きです。 これは、「マッドメン」のイントロシークエンスを見ながら、頭に浮かんだアイデアです。 「Mad Men のイントロを再作成して、男の光沢のある靴をクラシックな Adidas のペアに置き換えたらクールではないか？”

そのばかげた考えが、CSS3 Mad Men イントロのアイデアを私に与えてくれました。 バカでしょう？

Splitting the Scenes

最初の作業は、youtube でイントロの高品質なバージョンを見つけることでした。 それをよく研究した後、簡単な CSS3 アニメーションを使って簡単に複製できることに気づきました。

カメラの角度が変わるたびに、新しいシーンが作成されます。 私は、すべてのシーンの開始時と終了時に再生ヘッドを一時停止し、両方の画像を取得しました。 これで、各シーンの「ビフォー・アフター」画像ができました。 これをレイヤーごとにPhotoshopのファイルに貼り付けていきます。

Duplicating the Graphics

私は以前に取得したイメージの上に描画を開始しました。 1から6までのシーンは、とても簡単なものでした。

それぞれのグラフィックを描きながら、どのようにアニメーションさせるかを意識していました。 あるスクリーンで Photoshop を開き、別のスクリーンで mad men intro を開くことによって。

たとえば、机です。 オリジナルのイントロをよく見ると、机が滑り落ちながらバラバラになるのがわかります。 机の破片の動きを見て、どの破片が落ちると他の破片が見えなくなるかを判断し、グラフィックのhtmlや積み重ねの順番を計画し始めることができたのです。 これはとても大変な作業で、ちょっと頭のおかしい人でないとできないことだと思います。 *エヘン*

シルエットが落ちるときに飛んでいく建物を描くのは、それほど楽しいものではありませんでした。 ちょっとクリエイティブブロックに陥ったんです。 ガラスの向こうに誰を、何を配置すればいいのか、よくわからなかったのです。

建物にこだわるよりも、オリジナルにあるような、洗い流されたような、かすんだ感じの建物を再現する良い方法が見つからなかったのです。 建物にこだわるよりも、基本的な形を描き、建物のパースに合わせようと考えました。 そうすれば、落ちてくるシルエットの後ろで建物が動いていても、できるだけリアルに見えるはずです。 7402>

A Multinational Alliance

Andy Clarke と Geri Coady が登場します。 以前、AndyとGeriとは、彼の素晴らしい本「Hardboiled Web Design by Andy Clarke」のCSS3アニメーションで一緒に仕事をしたことがあるんだ。

私が作成した建物は最悪でしたが、最終的には Geri Coady のアートワークの良い基盤として機能しました。 彼女は、ALAのスピーカーの素晴らしいグラフィックを作成することができました。 これらの建物のパネルには、優れたデザイン/フォトショップ作業があります。 細心の注意を払う価値があります。 7402>

Hand Chiseled

アニメーションのコードは、16 のリスト アイテムを持つ順序付きリストから構成されています。 各リスト項目内には、その特定のシーンに必要なすべての html と画像があります。 デフォルトでは、これらすべてのリスト項目は display: none に設定されています。

私たちは、特定の時間の間、各リスト項目に “go” クラスを適用する jQuery を少し持っています。 この「go」クラスは、list-item を display:block に設定し、その list-item (scene) に割り当てられた CSS3 アニメーションを有効にします。

指定した時間が経過すると、次のようになります。 リスト アイテムから “go” クラスが削除されます。 display: none に戻し、CSS3 アニメーションをオフにして、すぐに次のリストアイテムに “go” クラスを適用する順序にします。 一連のイベントを再び開始します。

animation 要素のコードは、醜い非意味的な html です。 しかし、時には、良い計画を持っていて、「くそくらえ」と言うこともあります。

Hardboiled HTML

Andy には、醜いコードに対する計画がありました。 CSS3 アニメーションをサポートしていないブラウザでは、アニメーションの各シーンの画像と説明を含む順序付きリストが表示されます。

CSS3 アニメーションをサポートしているブラウザでは、modernizr を使用して、各画像と説明をアニメーションに必要な html 要素で置き換えることにします。 シンプル！

Mad Men ショーのオープニング クレジットにインスパイアされた CSS アニメーションを見るには、ここをクリックするのを忘れないようにしてください。 これは、簡単な GPU 最適化および自動再生で更新されています。 YouTube で CSS アニメーションをオリジナルのオープニング クレジットと比較してみてください。
— UPDATED: 2019年6月6日

に更新しました。