t's space.

A-Frame の画面に「閉じるボタン」を追加する

前回、A-Frameを実装しよう!ということで、HTMLとJavascriptを入力するだけで実装できるという記事を投稿しました。

さて、A-Frameのページにすると360度画像が表示されます。

今回は、こちらに閉じるボタンを追加してみましょう。

閉じるボタンをクリックするとA-Frameのタブが閉じられるようにします。

完成版

実装

※閉じるボタンのアイコンはFontAwesomeを使用しています。各自でHTMLのボタンを変更するようにお願いします。

HTML

<body>
<!-- 閉じるボタン -->
	
<div class="btn-top">
	<a href="javascript:window.open('about:blank','_self').close();">
		<i class="fas fa-times"></i>
	</a>
</div>

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

CSS

.btn-top {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 999;
}

.btn-top a {
	display: block;
	background: rgba(0,0,0,.35);
	margin: 20px;
	padding: 2px 8px;
	color: #fff;
	text-decoration: none;
	font-size: 28px;
	line-height: 20px;
}

A-Frameを使ったギャラリーサイトを作成する時に便利だと思います。
宜しければ参考にしてみてください。

Comment