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の送信メールを一定期間で自己消滅させる機能拡張「Dmail」

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

記事を読む

WEBサイトの背景に幾何学的なポリゴンアニメーションを簡単に実装できる「particles.js」

流行っているのかどうか定かではありませんが、海外のサイトなどで最近よく見かける幾何学的なポリゴンアニ

記事を読む

HTML/CSSをより見やすく！Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう？」そう思ったとき、ソースを見るか、Chromeのデベロ

記事を読む

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法

切れ込みの入ったリボン型のナビゲーションをCSS3だけで実装する方法をご紹介します。リボン関連に

記事を読む

無料でオリジナルなクイズが作成できるツール「QuizGenerator」

無料でオリジナルなクイズが、簡単に作成できるツールをご紹介します。作れるクイズは選択式、穴埋め、

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装！CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装！CSS shakeを使ってみたすでにお気づき

記事を読む

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了！が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。ところが、このPr

記事を読む

デザインのヒントはここに！海外の人気ブログで評価の高かった2013年のWEBデザイン60

新年を迎え、2013年のまとめ的な記事が海外ブログでも続々とアップされています。そんななかから今

記事を読む

名だたるデザイナーが作成したフリーのWEBサイト用PSDファイルが無料！Dribble発Photoshop用サイトテンプレート45

今回もDribbbleから。 Dribbbleは世界の名だたるデザイナーが作品をアップしているコミ

記事を読む

激易！YouTubeなどの動画やGoogleMapsをコピペだけでレスポンシブ化「Embed Responsively」

YouTubeやViemoなどの動画、あるいはGoogleMapsをコピペだけでレスポンシブ化できて

記事を読む

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

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