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

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

今この瞬間もサイバー攻撃が行われている！DDoS攻撃を可視化する「Digital Attack Map」に戦慄

戦慄を覚えるマップです。サービス自体は1年前に公開されていましたが、海外で再び注目され、私自身が

記事を読む

ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21

CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ

記事を読む

コード/js不要！ドラッグ＆ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

これは簡単！ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。背景画像などによく使われているポ

記事を読む

今さら聞けない！作業時間を短縮するChrome用ショートカットベスト・コレクション

ブラウザはChromeを使ってます。そのChromeでサイトを制作したり、ブログを書いたりしてい

記事を読む

アイコンフォントはもはや常識！アイコンフォントを無料で利用できるサービスベスト10

好きなアイコンだけを選んでオリジナルのアイコンフォントにできる無料のサービスをまとめてご紹介します。

記事を読む

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

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

記事を読む

Chromeのタブをクリックするだけで音声を消す方法

Google Chromeのタブをクリックするだけで音声を消す方法をご紹介します。 Chromeの

記事を読む

CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」

CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと

記事を読む

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

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

記事を読む

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

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