トップページに隠しギミックを仕込む – SWELLカスタマイズ

2021 9/07

2021.09.07

こんなSWELLユーザーに読んでほしい！

トップページに自己満足的な遊び心を持たせたい
SWELLのカスタマイズ沼にハマっている

あらすじ

トップページを自己満足的にカスタマイズする愉しみ

前回のTIPSに続き、今回もまた自己満足的なカスタマイズTIPSです。

一部の男性諸氏にはウケのよかった（？）、現在のトップページの隠しギミックについてご紹介したいと思います。

どちらかというと、SWELLカスタマイズというよりは、CSSとスクリプトによるカスタマイズ内容の方が濃いですが…。

以前の記事で、トップページのメインビジュアルを自己満足型にカスタマイズした手順をご紹介しました。

あわせて読みたい

メインビジュアルを「自己満足型」にカスタマイズ！ – SWELLカスタマイズ前回、マスクした背景を動画にしたので、せっかくならともう少し動きを加え、マスク部分をアニメーション化してみました。これこそ、アクセスしてきた人にとってはどーでもいい、自己満足型カスタマイズの極みです。

「メインビジュアル（動画）をマスクアニメーションで部分的に表示させる」という内容でしたが、

今回は、

「どこぞをクリックするとマスク部分を解除する」といった隠しギミックを仕込んで愉しむといった内容になります。

需要はまったくないと思いますが（笑）、「へーそんな風にやってるんだー」程度に読んでもらえればと思います^^;

トップページに隠しギミックを仕込む

やりたいことはこんなカンジです。

テキストをクリックしてマスクを反転させる

このカスタマイズは、こんなときに使えます。

トップページでひそかにたのしみたい

はい、ただそれだけです。

（…淡々と進行していきます）

メインビジュアルをマスクする方法は、先の関連記事を参照ください。

おさらいとして、マスクがかかっている状態のHTMLソースはこのようになっています。

<div class="p-mainVisual__imgLayer c-filterLayer__img">
	<video class="p-mainVisual__video mask-over" playsinline="" autoplay="" loop="" muted="" style="">
		<source data-src-sp="（動画パス）" data-src-pc="（動画パス）" src="（動画パス）">
	</video>
</div>
<div class="p-mainVisual__textLayer l-container l-parent u-ta-c">
	<div class="p-mainVisual__slideText">僕は残りの月にする事を決めて　歩くスピードを上げた</div>
</div>

前回のカスタマイズから変わった点として、マスクが適用される<video class="p-mainVisual__video">に直接CSSを定義するのではなく、ページ読込時にjQueryのtoggleClassメソッドでmask-overクラスを付与して、そのクラスにマスクCSSを定義しています。

jQuery(function($) {
	$("video.p-mainVisual__video").toggleClass("mask-over");
});

で、マスク部分class="mask-over"のCSSは以下のようになります。

.mask-over {
    -webkit-mask-image: url(/wp-content/uploads/2021/07/mask-logo-anime.svg);
    mask-image: url(/wp-content/uploads/2021/07/mask-logo-anime.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 28vh;
    mask-position: 50% 28vh;
}

カスタマイズの概要としては、

jQueryでテキストをクリックしたときに「mask-over」クラスを削除しマスク状態を解除
同時に親ノード<div class"p-mainVisual__imgLayer">に反転用クラス「mask-invert」を付与
CSSで「mask-invert」クラスに対して:before疑似要素で反転用画像を表示
他要素にも同様に「mask-invert」クラスを付与し、CSSで色を反転

というカンジです。ちょっと強引なカンジもしますが。

カスタマイズ手順は以下の通りです。

反転時のマスク画像を作成

通常のマスク画像を黒で作成していたので、背景動画の暗いトーンにあわせて白い画像を作成しました。
※アニメーションはなしの静的画像

反転時のクラス「mask-invert」をCSSに定義

反転時は上記画像を親ノードの<div class="p-mainVisual__imgLayer">に:before疑似要素で反転用画像を表示します。

.mask-invert::before {
    position: absolute;
    top: 28vh;
    left: 50%;
    content: url(/wp-content/uploads/2021/07/mask-logo-white.svg);
    -webkit-transform: translate(-50%);
    transform: translate(-50%);
}

:before疑似要素で<video> の上に画像を乗せているイメージです。

他要素の反転時のクラスもCSSに定義

クリックするテキスト「僕は残りの月にする事を決めて～」の部分と、スクロール画像およびテキスト「VIEW」部分も、色を反転させたいので、それぞれに適用するクラスを定義します。

.txt-invert {    /* テキスト部分 */
  color: #fff;
}
.img-invert {    /* スクロール画像部分 */
	filter: invert();
}

テキスト部分は色を #fff に変えていますが、スクロール画像は filterプロパティの invert()メソッドでネガポジ反転させています。

テキストをクリックしたときのjQueryスクリプトを追加

テキストのclickイベントで「mask-over」クラスを削除し「mask-invert」クラスを付与するスクリプトを、先ほどのjQueryスクリプトに追加します。

jQuery(function($) {
	$("video.p-mainVisual__video").toggleClass("mask-over");
	$(".p-mainVisual__slideText").click(function(){
		$(".p-mainVisual__video").hide().fadeIn(400);
		$(".p-mainVisual__video").fadeIn(400);
		$(".p-mainVisual__video").toggleClass("mask-over");
		$(".p-mainVisual__imgLayer").toggleClass("mask-invert");
		$(".p-mainVisual__scrollLabel").toggleClass("txt-invert");
		$(".p-mainVisual__scrollArrow").toggleClass("img-invert");
		$(this).toggleClass("txt-invert");
	});
	imgPreload('/wp-content/uploads/2021/07/mask-logo-white.svg', '/wp-content/uploads/2021/07/mask-logo-sp-white.svg');
	function imgPreload() {
		for( var i = 0; i < arguments.length; i++) {
			$("<img>").attr("src", arguments[i]);
		}
	}
});

4行目：.hide().fadeIn(400);
クリックしたときにフワッとなるように、<video>をフェードイン

6行目：.toggleClass("mask-over");
toggleClassメソッドで.mask-overクラスの除去／付与

7行目：.toggleClass("mask-invert");
toggleClassメソッドで親ノードの.mask-invertクラスの除去／付与

8、10行目：.toggleClass("txt-invert");
toggleClassメソッドでテキスト要素の.txt-invertクラスの除去／付与

9行目：.toggleClass("img-invert");
toggleClassメソッドで画像要素の.img-invertクラスの除去／付与

12行目：imgPreload()
切り替えるときに反転用画像（PC、SP）の表示にタイムラグが生じないよう反転用画像を先読み

これで、クリックしたときにマスクが反転する基本的なギミックの完成です。

レスポンシブ対応のCSSを追加

ブレイクポイントにあわせて反転用画像の表示方法を変更します。

■ブラウザ幅：1299px以下

@media (max-width: 1299px) {
	.mask-over {
		mask-size:85vw;
		-webkit-mask-size:85vw;
	}
	.mask-invert::before {
		position: absolute;
		content: '';
		background-image: url(wp-content/uploads/2021/07/mask-logo-white.svg);
		background-size: contain;
    background-repeat: no-repeat;
		width: 85vw;
		height: 100%;
	}
}

8-11行目：before疑似要素の背景画像に変更
:before疑似要素の場合、contet内で指定した画像のサイズは変更できないため、反転用画像を疑似要素の背景画像として指定しなおしています。そうすれば要素のサイズに応じてサイズが可変します。

12-13行目：width: 85vw; height: 100%;
マスク画像のサイズと疑似要素のサイズを合わせます。

■スマートフォン：599px以下

@media (max-width: 599px) {
	.mask-over {
	    -webkit-mask-image: url(/wp-content/uploads/2021/07/mask-logo-sp-anime.svg);
	    mask-image: url(/wp-content/uploads/2021/07/mask-logo-sp-anime.svg);
	    -webkit-mask-repeat: no-repeat;
	    mask-repeat: no-repeat;
	    -webkit-mask-position: 50% 24vw;
	    mask-position: 50% 24vw;
	    mask-size: 75vw;
	    -webkit-mask-size: 75vw;
	}
	.mask-invert::before {
	    position: absolute;
	    content: '';
	    background-image: url(/wp-content/uploads/2021/07/mask-logo-sp-white.svg);
	    background-repeat: no-repeat;
	    background-size: contain;
	    width: 75vw;
	    height: 100%;
	    top: 24vw;
	}