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

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

この記事にはプロモーションが含まれています

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

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

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

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

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

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

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

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

今回は、

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

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

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

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

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

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

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

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

(…淡々と進行していきます)

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

おさらいとして、マスクがかかっている状態の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;
	}
  • 3-4行目スマートフォン用 マスク画像に変更
  • 15行目スマートフォン用 反転画像に変更
  • 7-8、20行目 top: 24vw;
    マスク画像と疑似要素の表示位置を合わせます。
完成

\ ご支援ありがとうございます! /

くれぐれもカスタマイズは「自己責任」でお願いします^^;

当ブログでご紹介しているようなカスタマイズ(←本来の意味での)をしなくても、SWELLの基本機能だけで十分オシャレなブログ・サイトが構築できます。

テーマ選びに迷ったらSWELLを選んでおけば間違いないです!

(カスタマイズ沼にハマらないようご注意ください^^;)

SWELLを使用したブログの構築・カスタマイズのご相談承ります

本業の傍ら、SWELLを使用したブログの構築およびカスタマイズを承っております。
「おしゃれなブログにしたい」
「独自のカスタマイズをしたい」など、
お気軽にご相談ください。
詳しくは、TwitterのDMからどうぞ。
まずはTwitterで仲良くしてください ^^

WordPressテーマ「SWELL」

17,600円(税込)

シンプル美と機能性の両立。圧倒的な使い心地を追求するWordPressテーマ。ブロックエディター完全対応!

WordPress初心者の方にお薦めの本

この記事にアクセスされた方の中には、「SWELLでブログをはじめたい!」というWordPress初心者の方も多いと思います。はやくサイト型にカスタマイズしたブログを立ち上げたいですよね。

と、その前にWordPressの基本を理解するコトも必要です。

ウチのチームでは、WordPress初心者の若い子たちに、WordPressの基本を理解してもらうため、この本を読んでもらっています。

WordPressを立ち上げるところから、基本的なカスタマイズまで、初心者でも本格的なビジネスサイトや個人ブログを作る手順を実用サンプルを用いて詳しく解説しています。(サンプルコードもダウンロードできます)

コピペでカスタマイズして後々めんどうなコトになる前に、まずはWordPressの基本をきちんと勉強することをおススメします^^/

CUSTOMIZE
+PLUGIN
KNOWLEDGE
シェアしていただけるとうれしいです^^
  • URLをコピーしました!
  • URLをコピーしました!
あらすじ