[CSS]数行のスタイルシートで、スター・ウォーズのオープニング風アニメーションを簡単実装

JavaScriptや画像は一切無しで、テキストが3Dで流れるスター・ウォーズのオープニングを作成するスタイルシートを紹介します。

Star Wars 3D Scrolling Text in CSS3

• デモ
• 実装

デモ

デモは最新のFirefox, Chromeでご覧ください。
IEは3Dの変形アニメーションにまだ対応していないため、IE10を待ってください。

デモページ

そのまま待っていると、スター・ウォーズのオープニングが始まります。

実装

Step 1: HTML

HTMLは簡単で、テキストのp要素をdiv要素二つで内包します。
titlesが外側で、titlecontentがスクロールするセクションです。

<div id="titles"><div id="titlecontent">
	<p>テキストテキストテキストテキスト</p>
	...
	...
</div></div>

Step 2: CSS

まずは見た目のスタイルです。
:after擬似要素でフェードアウトのグラデーションを作成します。
※ベンダープレフィックスは省略しています。

#titles{
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(300px) rotateX(25deg);
}
#titles:after{
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}

最後にテキストをスクロールするアニメーションです。

#titlecontent{
	position: absolute;
	top: 100%;
	animation: scroll 100s linear 4s infinite;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}