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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
スクロールした位置についてくるStickyプラグイン15
スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ
-
-
2013年のベストjQueryプラグイン47
2013年も残すところわずかになりました。 今年もたくさんのjQueryプラグインが発表されていま
-
-
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で
-
-
背景画像をフルスクリーン＆レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります
-
-
美しいCSSグラデーションをランダムにつくってくれる「Random CSS Gradient Generator」
ズボラな自分に最適なCSSグラデーション作成ツールがあったので、ご紹介します。 グラデーションを自
-
-
売上手数料なし！簡単・便利なWixStoresでネットショップを開業する方法
「知識ゼロだけど自分でネットショップを作りたい」「業者に頼む余裕も予算もない」そんな方にオススメなの
-
-
超簡単！CSSで上下左右センターにする方法
超簡単ですぐ実践できるCSSで上下左右センターにする方法をご紹介。 display:flexを使っ
-
-
iPhoneもMacも簡単OK！CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device
-
-
ハイクオリティーなのに全部無料！現場で使えるBootstrap3用テンプレート40+
ハイクオリティーなのに全部無料の現場で使えるBootstrap3用テンプレートをまとめました。 ラ
-
-
無料で利用できるhtml5プレイヤー（jQueryプレイヤー）14（2013）
html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。 iPhoneは今後