CSS

2017/04/07

CSS3やCSS2.1などのプロパティーもブラウザ実装が進んできておりますので、自習がてらにスターウォーズ風オープニングロールをCSSで実装してみた。

あちこちにもっとよくできたものがありますが、せっかく作成したので備忘録的にも残しておきたいと思います。

CSSのanimationというプロパティーがありまして、以前ならJavaScriptでsetTimeoutか何かで位置を数ピクセルずつコンマ何秒おきに変化させるスクリプトが必要だったのですがCSSだけでできるようになっています。

テロップ部分にpositionのabsoluteを設定してanimationでtopを移動してあげればあとは台形に変形するCSSのプロパティーのtransformを設定すれば出来上がりです。

HTML

	

		

			
むかし、むかし、あるところにおじいさんとおばあさんがいました。
			
おばあさんは川へ洗濯に、おじいさんは山へ芝刈りに行きました。
			
おばあさんが川で洗濯していると、大きな桃が、どんぶらこ、どんぶらこ、と流れてきました。おばあさんはその大きな桃をひろいあげました。
			
すると、おばあさんはその桃をむしゃむしゃと食べ始めました。桃の実をあらかた平らげると空腹が満たされ、おじいさんの分が残っていないことに気づきました。
			
なかったことにしました。
		
	

3重構造になっています。

CSS
.screen{
	width:100%;
	max-width:600px;
	height:200px;
	background-color:#000;
	overflow:hidden;
	position:relative;
}
.outer{
	width:80%;
	height:200px;
	overflow:hidden;
	position:absolute;
	left:8%;
	top:-10px;
	background-color:#000;
 	transform:perspective(100px) rotateX(30deg);
  }
.roll{
	padding-top:200px;
	animation: anime1;
	animation-duration: 20s;
	animation-timing-function:linear;
	animation-iteration-count: infinite;
	position:absolute;
	font-weight:bold;
	color:#ff0;
}
@keyframes anime1{
	0% {top: 0;}
	100% {top: -600px;}
}

これで冒頭のスターウォーズ風オープニングロールをCSSで実装しています。ここで告白いたしますが、わたくし、なぜか縁なくスターウォーズの映画自体まともに1本も見たことがありません。せいぜいどっか一部を10分程度だと思いますのでスターウォーズ風オープニングロールも怪しいものです。

一応HTMLの説明です。3重構造の一番内側のdiv要素内は普通にHTMLを書いていただければ大丈夫なはずです。定義リストで役名、役者名とか見出し要素と段落要素で協賛、何々株式会社とかでいいと思います。

一番内側のdiv要素に対してanimateでtopを指定して動かせるようにposition:absolute;を設定します。そしていきなり文字が現れないように上余白、padding-top:200px;を設定しています。

その親要素には幅と高さを設定してoverflow:hidden;を追加します。また内側のdiv要素のposition:absolute;の起点になるようにposition:absolute;を設定します。（まださらに親要素に対して位置決めしているのでabsoluteにしています。position:relative;にして位置決めはパディングでもいいかもしれません）

ちょっと実際とは違いますが,親要素の黒枠な中に赤枠の要素を入れてはみ出した部分を非表示にします。そして赤枠を上にずらしていけばスクロールが完成です。

1. 一番内側のdivがスクロールしていくのでここにCSSのaminateを設定します。必ずしないといけないことが名前を付けることと変化を何秒で終わらすかです。

    

2. animation: anime1;となっているのが名前です。anime1というのは任意の名前を付けてください。本当はanimation-nameというプロパティー名が正式です。animationはショートハンドプロパティーです。borderでborder-styleやboreder-colornなど設定できるようなものです。
3. animation-duration: 20s;がアニメーション効果を何秒かけて実行するのかです。今回は20秒でワンパターンです。
4. そして@keyframes anime1がアニメーションの中身になります。@keyframesの後ろにanimation-nameでつけた名前を書きます。今回は名前 anime1のCSSプロパティーtopを0から-600pxまでアニメーションしてねということです。それ以外にも背景色やら幅や高さなど複数のCSSプロパティーをカンマ区切りで初期値、最終値で指定できます。また、半分まで来た時に別の指定をしたいときには50% {color: #f00;}みたいにこれも複数書くことができます。

最低限これで動きます。

アニメーションは下の6つ７つ（2017/05/25追記）のプロパティーがあります。

1. animation-name 名前を付ける
2. animation-duration アニメーションの時間
3. animation-timing-function イージングのつけ方
4. animation-delay 何秒後から始めるか
5. animation-iteration-count 繰り返しの数
6. animation-direction 逆再生するか

7. animation-fill-mode 再生後のスタイル（2017/05/25追記）

animation-timing-functionは初期値がeaseになっておりイージングがかかっていますのでanimation-timing-function:linear;で同じ速度で動くように指定しています。

本当は繰り返しいらなのですがanimation-iteration-count: infinite;で無限に繰り返すように指定しています。

あとは、台形変形して文字色背景色などの設定で出来上がりです。

CSSのtransformプロパティーを使います。

perspectiveは奥行きを表すZ平面と視点の距離になりますので近くで見るほど極端になります。rotateXはX軸に対しての傾きで0degで垂直になって普通の見え方で90degで真っ平になって高さ0で見えなくなります。

あとは微調整ですね。一番親のdiv要素の背景を黒にして2番目のdivを中央に配置したり、ちょっと親より小さくして、下辺の方は左右がちょっとだけ切れるようにしてあったりします。

自分で書けばいろいろと調整できたり、CSSの理解も深まりますのでコピペで動きを確認してからカスタマズしてくみてださい。

流れていく文字はアクセシビリティー的どうかと思いますので、装飾的な画像のような使い方がおすすめです。文章として読んでいただきたい場合は、速度を調節できるようにするとか、止めることができるようにするとかの対策をしてください。