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

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

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

今回ご紹介するのはSVGベースのシームレスパターンを簡単につくれて、PNG形式でダウンロードできてし

記事を読む

これは便利！背景画像に使えるシームレスパターンを無料でコピー/ダウンロードできる「Transparent Textures」

こりゃ便利！というサービスがあったのでご紹介します。 WEBサイトを制作するときに背景画像などに利

記事を読む

スクロールした位置についてくるStickyプラグイン15

スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ

記事を読む

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

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

記事を読む

クリックしたくなる！CSSだけで作られた無料のボンタコレクション「CSS Buttons」

CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos

記事を読む

文字をカラフルに！CSSとjQueryでテキストを2〜3色で表現してしまう「HalfStyle」

CSS3やWEBフォントの登場でテキスト回りの装飾がお手軽になってきましたが、1文字をだけを2〜3色

記事を読む

CSSアニメーションでここまでできる！無料のCSSアニメーションコードサンプル23

CSSアニメーションだけで、こんなこともできてしまうというコードサンプルをご紹介します。掲載され

記事を読む

無料のスクロール／パララックススクロール系jQueryプラグイン24

スクロール／パララックススクロールはコンテツをリッチにしてくれる魅力的な演出です。今回はそんな魅

記事を読む

無料のドメインを取得してレンタルサーバーに設定する方法

ドメインって無料で取得できるサービスがあるのをご存知でしたか？ドメインというとお名前.comなど

記事を読む

2013年のベストjQueryプラグイン47

2013年も残すところわずかになりました。今年もたくさんのjQueryプラグインが発表されていま

記事を読む

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

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