2014/07/16
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
Sponsored by
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。
表現力豊かなCSS3ですが、CodePenに、映画のエンドロール風エフェクトを表現したコードが公開されていたのでご紹介します。
エンドロールだけでなく、さまざまな応用表現が可能になるのではないでしょうか。
ご参考になれば幸いです。
映画のエンドロール風エフェクトをCSS3だけで表現
「Movie Credits」は、映画のエンドロール風エフェクトをCSS3だけで表現したものです。
CodePenに実際のデモがあるので、興味のある方は一度覗いて下さい。
HTMLは以下のような感じです。
|
1 2 3 4 5 6 7 8 9 10 |
<div class='wrapper'> <div class='movie'>life of john doe</div> <div class='job'>directed by</div> <div class='name'>christopher nolan</div> <div class='job'>produced by</div> <div class='name'>steven spielberg</div> <div class='job'>screenplay by</div> <div class='name'>michael bay</div> <!-- 以下省略 --> </div> |
CSSでpositonプロパティとキーフレームアニメーション@keyframesを利用して、エンドロールを表現しています。
いやー勉強になりますね。
ただキーフレームアニメーションをサポートしているブラウザは、IE10、Firefox29.0、Chrome34.0、Opera22.0、Safari7.0以上となっているので、何にでも利用するというわけにもいかないのですが……。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300); * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } body { background: radial-gradient(ellipse at top left, #334455 0%, #112233 100%); overflow: hidden; } .wrapper { position: absolute; top: 100%; left: 50%; width: 400px; margin-left: -200px; font: 300 30px/1 'Open Sans Condensed', sans-serif; text-align: center; text-transform: uppercase; color: #fff; animation: 60s credits linear infinite; } .movie { margin-bottom: 50px; font-size: 50px; } .job { margin-bottom: 5px; font-size: 18px; } .name { margin-bottom: 50px; font-size: 35px; } @keyframes credits { 0% { top: 100%; } 100% { top: -500%; } } |
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
-
0 -
-
0 -
3 -
5
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」
サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用
-
-
HTML5/レスポンシブ/フラットデザインの無料テンプレート50（2013年分）
以前「全部無料！レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121」という
-
-
レスポンシブWEBデザイン用ナビゲーション＆メニューのベストパターン16
レスポンシブWEBデザインは当たり前の世の中になりました。 当たり前になるにつれて、レスポンシブW
-
-
WEBデザインのインスピレーションに！UIデザインのコードスニペットコレクション「CodeMyUI」
WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
ナビゲーションだけが90以上！ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」
ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し
-
-
プログラミング初心者がプログラミングを学ぶのにベストな海外チュートリアルサイト11
日本でプログラミングを学ぶなら、ドットインストールが有名ですよね。 海外でもプログラミングを学ぶう
-
-
背景画像をフルスクリーン＆レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
-
WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」
流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ
-
-
アイコンフォントはもはや常識！アイコンフォントを無料で利用できるサービス ベスト10
好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。