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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで）
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ
-
-
オフラインでも便利なChrome機能拡張おすすめアプリ10
ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。
-
-
1歩先へ！HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」
CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co
-
-
twitterでのキーワードのひろがりを調べられるツール「twimp」
twitterでのキーワードのひろがりを調べられるツール「twimp」をご紹介します。 作成者した
-
-
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法
切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。 リボン関連に
-
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
-
ショッピングカートだけの利用も無料！決済システムが充実したBASE（ベイス）が使える
無料でネットショップが開設できるBASE（ベイス）に、ショッピングカートだけの利用も無料というサービ
-
-
通信量無制限!? 隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」
隣近所のWiFiをシェアして利用し放題にする注目のサービス「シェアWiFi」がリリースされました。
-
-
CSSアニメーションでここまでできる！無料のCSSアニメーションコードサンプル23
CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。 掲載され
-
-
背景画像をサッとつくれる便利ツール20選
背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目