t's space.

A-Frameの画面に、説明UIの「コーチマーク」を表示させる

昨日に引き続き、A-Frameのカスタマイズの記事を書きます。
昨日はA-Frameの画面に閉じるボタン追加するボタンを追加しました。

クリックでA-Frameのページに飛べます。

しかし、初回の方が見るのは分かりづらいのでは?と個人的に思ったので、説明を表示するUI「コーチマーク」を表示させてみようと思います。
コーチマークって何?という方はこちら↓

完成版

画像をクリックで全画面で表示します。

実装

※上記完成版にある「閉じるボタン」は下記では実装できません。過去の記事を参考にしてください。
※iタグのFontAwesomeは、各自で変更してください。

HTML

<body>
<!-- コーチマーク -->
<div class="coachmark">
	<div class="coachmark__text__center">
		上下左右にドラッグで移動
		<i class="fas fa-arrows-alt"></i>
	</div>
	<div class="coachmark__text__left">
		▼ 画面を閉じる
	</div>
	<div class="coachmark__text__right">
		全画面で表示する ▼
	</div>
</div>

<!-- A-Frame -->
<a-scene>
	<a-sky src="img.jpg" rotation="0 -130 0"></a-sky>
</a-scene>

CSS

.coachmark {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.5);
	color: #fff;
	z-index: 998;
	transition: all .3s;
}

.coachmark__text__center {
	position: relative;
	top: 20px;
	text-align: center;
}

.coachmark__text__center i {
	font-size: 2em;
}

.coachmark__text__left {
	position: fixed;
	bottom: 50px;
	left: 20px;
	text-align: left;
}

.coachmark__text__right {
	position: fixed;
	bottom: 50px;
	right: 20px;
	text-align: right;
}

jQuery

$(".coachmark").on("mousedown",function(){
	$(".coachmark").css("z-index","-999");
});

簡単なコーチマークの実装ですが、これがあるだけでもユーザーに分かりやすくなったと思います。
A-Frameを使っている方は是非参考にしてみてください。

Comment