2014/07/16

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

映画のエンドロール風エフェクトをCSS3だけで表現

「Movie Credits」は、映画のエンドロール風エフェクトをCSS3だけで表現したものです。
CodePenに実際のデモがあるので、興味のある方は一度覗いて下さい。

HTMLは以下のような感じです。

[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以上となっているので、何にでも利用するというわけにもいかないのですが……。

[css]
@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]

Movie Credits

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

映画のエンドロール風エフェクトをCSS3だけで表現

この記事を読んだ人はこんな記事も読んでいます

一石二鳥！ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

CSS3を知らなくてもOK！便利すぎるCSS3関連ツール＆ジェネレーター51

ファイルのウイルス・マルウエアを無料でスキャンできるオンラインサービス9

売上手数料なし！簡単・便利なWixStoresでネットショップを開業する方法

SVGベースのオリジナルなシームレスパターンを作ってダウンロードできる「Plain Pattern」

超簡単！CSSで上下左右センターにする方法

これは魅力的！CSSだけで実装できる無料の画像ホバーエフェクト22

レスポンシブWEBデザインの確認に最適！スマホ・タブレットでの表示を一度に確認できる「Responsinator」

UIデザインのリニューアル前と後を比較できるギャラリーサイト「Android UX before and after」

人気のHTML/CSSコードサンプル25＋おまけ2 from CodePen