「時をかける少女」のタイトルロゴをCSSアニメーションで作ってみた

、金曜ロードショーで細田守監督の「時をかける少女」がやってましたね。

大好きな映画で、もう4、5回くらい観た気がするし、DVDも持ってるのですが、やっていると観てしまいます。

タイムパラドックスとか細かいことがどうでもよくなるくらい、爽やかで気持ちのいいアニメだと思います。今の目で見るとどうしても古臭さを感じる原作を、舞台を現代にして大きくアレンジしているのも良いですね。

ところでこの映画、タイトルロゴが都合二回表示されるのですが、これを見ていてふと、「CSSで作れそう」と思いました。

ので、実際に作ってみました。以下のリンクからどうぞ。Chrome、Safari、Firefox、IE11で動作確認しています。

時をかける少女タイトルロゴアニメ

簡単な解説

CSSは部分的に抜き出しているので、実際のコードはソースを見てください。

<p class="title"><span><span>時</span><span>を</span></span><span><span>か</span><span>け</span><span>る</span></span><span><span>少</span><span>女</span></span></p>

「時をかける少女」の文字列を一文字ずつspanで分け、さらに「時を」「かける」「少女」ごとにspanでグループ化しています。一続きの言葉なので改行はしません。

.title {
	font: bold 72px/1.45 sans-serif;
	writing-mode: vertical-rl;
}

writing-modeで縦書きにします。もともとIEの独自実装だったものがCSS3で正式採用されたものです(ただしIEとはプロパティ値の名前が違う)。

.title > span {
	position: relative;
	display: table;
}

.title > span::before {
	position: absolute;
	background: rgb(92,27,25);
	content: "";
	width: 2px;
	height: 0;
	right: 0;
	top: 0;
	animation: line 2.1s linear forwards;
}

@keyframes line {
	0% {height: 0}
	100% {height: 100%}
}

文字横の赤い線を擬似要素で作り、これの高さを@keyframesで動かしています。animationforwardsはアニメ終了時点のスタイルをそのまま保持するための指定です。

このままでは全ての赤線が同時にアニメーションしてしまうので、開始時点をずらしてあげます。

.title > span:nth-child(2)::before {
	animation-delay: 1.4s;
}

.title > span:nth-child(3)::before {
	animation-delay: 2.8s;
}

次は文字のフェードです。

.title > span > span {
	opacity: 0;
	animation: fade 1.7s .8s ease-out forwards;
}

@keyframes fade {
	0% {opacity: 0}
	100% {opacity: 1}
}

赤線が表示されるのと、文字が表示され始めるのとでは後者のタイミングが遅いため、最初からanimation-delayの値(.8s)を設定しています。

当然これもこのままでは全て同時に表示されるので、一個ずつずらしてあげます。

.title > span:first-child > span:nth-child(2) {
	animation-delay: 1.5s;
}

.title > span:nth-child(2) > span:first-child {
	animation-delay: 1.9s;
}

.title > span:nth-child(2) > span:nth-child(2) {
	animation-delay: 2.5s;
}
...

長いので省略しています。

また、writing-modeに対応していないブラウザのために、@supportsを使って縦書きを再現しています。それなら最初からwriting-mode使わなけりゃいいという話ですが、せっかくの縦書きなので使っています。専用のプロパティがあるならそっち使うに越したことはないですから。

全部表示されたらフェードアウトする効果も追加しようかと思ったのですが、Chromeで表示が崩れる不具合が生じたためやめました。

一応DVDを見ながら極力タイミングが合うように調整していますが、完全に一致させるのは難しいので、このくらいかなあと感覚で作りました。

雰囲気は再現できてるでしょう?

Comments

  • モッキンバード

    相変わらず芸が細かいな(  ̄▽ ̄)