【リヴィール入門】オーバーレイのページ遷移を作ってみよう。下に隠れたコンテンツをスマートに表示する

• デモページ
• ソースダウンロード

ページ遷移のアニメーションには、さまざまな種類があります。今回のデモは、画面下に隠されているコンテンツを表示するトランジションです。

このようなトランジションを「リヴィール」と呼びます。下に隠れたコンテンツをリヴィール（明らかに）することが由来です。

今回は少しひねりを加えた、ナナメに動くオーバーレイのリヴィールエフェクトによるページ遷移を作ってみましょう。

リヴィールエフェクトを作る

リヴィールエフェクトの特徴は、シンプルなテクニックで、魅力的な効果をつけられるところです。あたかもクリッピングマスクを使っているようなおもしろいエフェクトが、ちょっとした工夫で簡単に作れます。

どのような仕組みになっているのか、順を追ってご説明します。まずはシンプルに、コンテナを上に動かしてみます。

次に、メイン要素がもとの位置にとどまっているように見せるために、一部の要素の動きを逆にしてみましょう。

最後に、親要素にoverflow:hiddenを加えます。

これでリヴィールエフェクトは完成です！

トランジションのタイミングを変えたり、内側の要素にアニメーションをつけるなど、まだまだひねりを加える方法はたくさんあるでしょう。

ナナメに遷移させる

今回は角度をつけて、もうすこしエフェクトを複雑にしてみましょう。

単純にアニメーションに角度をつけただけだと、遷移の際にへんな隙間ができてしまうため、幅と高さの設定には注意が必要です。こちらの記事（英語）を参考に、ナナメ遷移に適切な幅と高さを割り出しましょう。以下は記事からの引用です。

幅がw、高さがhの座標軸に平行な四角形の角度をφにすると、バウンディングボックスの幅は以下のようになります。

W = w·|cos ɸ| + h·|sin ɸ|
H = w·|sin ɸ| + h·|cos ɸ|

（|x|は絶対値をあらわします）

さらに今回は、ここまでに作った構造を保ちながら、コンテンツをまっすぐ表示する必要があります。計算をいじらなくて済むように、角度をつけたコンテンツは移動させず、かわりにリサイズしたコンテナをアニメーションに使用しましょう。

結果的に、以下のような3つのコンテナが必要になります。

<div class="content content--first"><!-- only rotated -->	
	<div class="content__move"><!-- resized and moved -->
		<div class="content__reverse"><!-- reverse rotation -->
			<!-- ... -->
		</div>
	</div>
</div>

以下はデモの構造です。幅と高さと角度を確認できます。

このような構造にすれば、アイデア次第で、さまざまなデザインのページ遷移アニメーションが作れます。

例えば以下のように、斜めに移動する要素を複数重ねてみても面白いかもしれません。

なおオーバーレイを増やす際には、アニメーションがずれないように気をつけましょう。

縦方向だけでなく、横にスワイプするようなデザインも可能です。

おわりに

まっすぐ動くものに角度をつけるだけで、印象はガラッと変えられます。

今回ご紹介した例をベースに、色や角度、リヴィールの方法を変えてみてください。ユニークなページ遷移が簡単に作れるはずです。

（原文：Mary Lou　翻訳：Asuka Nakajima）

こちらもおすすめ！▼