webデザイン

【mask-image】呪術廻戦サイトのページ遷移時アニメーションを解析してみた

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
五条悟 呪術廻戦

今回は呪術廻戦のアニメ公式サイトの ページ遷移時アニメーションについて解析してみました。

個人的にページ遷移時アニメーションは気になっていたけれども避けていたのですがアニメのサイトってページ遷移時のデザインに凝っているところが多いなと最近思い挑戦してみることにしました。

大雑把な動きとしてはページロード時に中央から呪力っぽい形のマスクが広がっていって2ndページ(伏魔御廚子の背景)に遷移するという動きです。

ボタンのホバーアニメーションにも同じマスクを使いまわしています。

TVアニメ「呪術廻戦」公式サイト

このアニメーションはcssのmaskプロパティとanimationプロパティのstepsを組み合わせて1コマずつ進めてGIFアニメのように作成していくイメージです。
呪術廻戦のページロードでは23コマでアニメーションを作成しています。
cssのmask-imageアニメーションを使用してレベルの高いアニメーションが可能になります。
また同アニメーションをオンマウスでも使用しています。

まず、maskについて簡単に説明すると画像を使用してマスキングする方法です。

※maskは現在のところベンダープレフィックス-webkit-を付ける必要がある、もしくはFirefoxのみ対応のプロパティが複数存在します。

mask-image

マスクレイヤーとなる切り抜き用の透過画像を設定します。

mask-repeat

マスキングする画像の繰り返し方法を指定します。
background-repeatと同様の使い方です。

mask-position

マスキングする画像の位置を指定します。
background-positionと同様の使い方です。

mask-size

マスキングする画像のサイズを指定します。
background-sizeと同様の使い方です。

mask-clip

border、padding、marginなどのマスク適用の範囲がどこまでかを指定できます。

以下はbackimg.jpgという背景用画像をmaskimg.pngという画像で切り抜いています。

img.mask {
	-webkit-mask: url(images/maskimg.png) center center no-repeat;
	mask: url(images/maskimg.png) center center no-repeat;
	-webkit-mask-size: 100% auto;
	mask-size: 100% auto;
}
<img class="mask" src="images/backimg.jpg">




実際にページロード時に発生するアニメーションを作成します。
サンプルでは丸型のアニメーションが広がっていくマスクになります。

サンプル

当サンプルでは縦600px、横1068pxのマスキング画像10コマ分がつながった画像(anime.png)を使用しています。

クラス.page_maskにマスク要素を設定します。
anime.pngを左橋からコマ送りにするアニメーションaniをleft: 0;からスタートさせ、9回コマ送りが必要なので animation: ani 0.7s steps(9) 0.3s both;とします。

.page_mask{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: #7effe5;
	-webkit-mask-image: url("../img/anime.png");
	mask-image: url("../img/anime.png");
	-webkit-mask-size: 1000% 100%;
	mask-size: 1000% 100%;
	animation: ani 0.7s steps(9) 0.3s both;
	z-index: 999;
}
@keyframes ani {
  from {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
  to {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
}

cssアニメーションが終了したらマスク部分を削除する処理を追加します。

<script>
$(function(){
    //LOADING
    $(window).on("load", function(){
        $("body#b_ani").addClass("active");
		$("#loading").addClass("active");
		$("#loading.active").on('webkitAnimationEnd AnimationEnd',function(){
			$("#loading").remove();
		});
    });
});
</script>

cssのmaskとanimationのstepの組み合わせでアニメーションの幅が広がります。

uhaha

メカ丸と三輪ちゃん推してます(ò_óˇ)
あと脹相かっこよくない?!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*