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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
HTML,CSS,JSのコードを美しく整形し?部分の指摘もしてくれるDirty Markup
HTML,CSS,JSのコードを美しく整形し、？部分の指摘もしてくれるDirty Markupをご紹
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで）
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
背景画像をフルスクリーン＆レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
-
これは便利！背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」
こりゃ便利！というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利
-
-
プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18
プログラミングやコーディングするとき、どんなフォントを使っていますか？ 私の場合、Coda 2とい
-
-
WEBデザインのインスピレーションに最適！パーツ/テーマごとのデザイン見本帳「calltoidea」
WEBデザインのインスピレーションに最適なパーツ/テーマごとのWEBデザイン見本帳「calltoid
-
-
無料のスクロール／パララックススクロール系jQueryプラグイン24
スクロール／パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。 今回はそんな魅
-
-
レスポンシブWEBデザインの確認に最適！スマホ・タブレットでの表示を一度に確認できる「Responsinator」
レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ
-
-
アイコンはCSSで！フォントもSVGも使用しないCSSだけのアイコンセット「Icono」
CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV
-
-
スクロールした位置についてくるStickyプラグイン15
スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ