2014/07/16
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。
表現力豊かなCSS3ですが、CodePenに、映画のエンドロール風エフェクトを表現したコードが公開されていたのでご紹介します。
エンドロールだけでなく、さまざまな応用表現が可能になるのではないでしょうか。
ご参考になれば幸いです。
映画のエンドロール風エフェクトをCSS3だけで表現
「Movie Credits」は、映画のエンドロール風エフェクトをCSS3だけで表現したものです。
CodePenに実際のデモがあるので、興味のある方は一度覗いて下さい。
HTMLは以下のような感じです。
<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>
[/html]
CSSでpositonプロパティとキーフレームアニメーション@keyframesを利用して、エンドロールを表現しています。
いやー勉強になりますね。
ただキーフレームアニメーションをサポートしているブラウザは、IE10、Firefox29.0、Chrome34.0、Opera22.0、Safari7.0以上となっているので、何にでも利用するというわけにもいかないのですが……。
@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%;
}
}
[/css]
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121
2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン
-
-
画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」
CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる
-
-
CSSアニメーションを使ったエフェクトライブラリー9
CSSアニメーションを使ったエフェクトは、プログラムを苦手とするWEBデザイナーや一般の方々に新しい
-
-
波打つようなクリックエフェクトを実装できる「Waves」
今回はクリックしたときに、静かな湖面を指で触れて波打つようなエフェクトを実装できるライブラリーをご紹
-
-
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ
-
-
UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」
UIデザインのリニューアルの前と後をひと目で比較できるギャラリーサイトをご紹介します。 Googl
-
-
無料ホームページなのにプロ並みのデザイン&高機能サイトが瞬時に作れるWix!感想と使い方
Wixという無料ホームページがつくれるサービスをご存知でしょうか。 かなり以前からあったサービスで
-
-
シンプルなのに効果的!CSS3トランジションを使ったマウスオーバーアニメーション11
CSS3を使えば、シンプルなコードなのに、ユーザーを「おっ!」と思わせる楽しい動きを簡単に実装できて
-
-
デザインのヒントはここに!海外の人気ブログで評価の高かった2013年のWEBデザイン60
新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。 そんななかから今
-
-
無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」
無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?
