2014/07/16

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

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

Sponsored by

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>

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

@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%;
  }
}

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アソシエイト・プログラムの参加者です。

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

グラフィックデザイナーのためのオンラインポートフォリオ作成方法

グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか？持っていない

記事を読む

インパクト大！Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張「Gmail GifLine」

Gmailに一瞬にしてGIFアニメーションを添付できるChrome機能拡張をご紹介します。メール

記事を読む

コピペOK! 画像のホバーエフェクトを簡単にアニメーションさせられるimagehover.css

画像や写真にマウスを重ねたときに、アニメーションのエフェクトがかかっていると、それだけで洗練された印

記事を読む

レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+

サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で

記事を読む

アイコンはCSSで！フォントもSVGも使用しないCSSだけのアイコンセット「Icono」

CSSだけでつくられたアイコンセットのご紹介です。近年のアイコンというと、アイコンフォントかSV

記事を読む

HTMLメールの無料テンプレートをお探しなら「Open Source Email Templates」

HTMLメールは、メールでの占める割合を着実に増やしていますよね。美しいデザインのHTMLメール

記事を読む

SVGのシームレスパータンを生成できる無料のフリージェネレーター「PatternBolt」

簡単にWEBサイトの背景画像が作れてしまう無料ジェネレーターのご紹介です。つくれるのは、SVG形

記事を読む

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」

Gmailの送信メールを一定期間で自己消滅させる機能拡張「Dmail」をご紹介します。 Gmail

記事を読む

セキュリティー／プライバシーにすぐれたブラウザ6選

IE、Chrome、Safari、Firefoxといったメジャーブラウザ以外にもたくさんのブラウザが

記事を読む

左右からメニューがスルッ！CSSだけで作成されたオフカンバスメニュー6

CSSだけで作られたオフカンバスメニューをまとめてご紹介します。「オフカンバスメニュー」は、ボタ

記事を読む

前の記事
CSSアニメーションを使ったエフェクトライブラリー9

次の記事
名だたるデザイナーが作成したフリーの英語/欧文フォントが無料！Dribble発の英語/欧文フォント20