<html>
<head>
<meta name="viewport" content="width=device-width">
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.min.js"></script>
<script src="https://rawgit.com/rdub80/aframe-gui/master/dist/aframe-gui.js"></script>
<script src="../APP/js/index.js" defer="defer"></script>
<style>
body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
}
li{
height: 100%;
list-style: none;
position: absolute
}
li.list1{
position: absolute;
top:5%
}
li.list2{
position: absolute;
top:25%;
}
li.list3{
position: absolute;
top:45%;
}
li.list4{
position: absolute;
top: 65%;
}
button.MainButton{
-webkit-appearance: none;
margin-top: 20px;
margin-left: 20px;
width: 100px;
height: 50px;
position: absolute;
z-index: 1;
opacity: 0;
display: block;
animation-duration: 2s;
}
div.content{
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 90%;
width: 400px;
border: black solid 3px;
background:black;
z-index: 1;
display: none;
animation-name: fade;
animation-duration: 2s;
}
h1{
font-size: 20px;
color: white;
text-align: center;
}
button.backbtn{
position: absolute;
bottom: 10%;
left: 50%;
transform: translate(-50%, -10%);
width: 100px;
height: 50px;
}
@keyframes fadein {
from {
opacity: 0;
transform: translateX(-100px);
}to {
opacity: 1;
transform: translateX(0);
}}
@keyframes fadeout {
from {
opacity: 1;
transform: translateX(0);
}to {
opacity: 0;
transform: translateX(-100px);
}}
@keyframes fade{
from{
opacity: 0;
}
to{
opacity: 1;
}}
</style>
</head>
<body>
<li class="list1"><button class="MainButton" id="test0">施設紹介</button></li>
<li class="list2"><button class="MainButton" id="test1">撮影</button></li>
<li class="list3"><button class="MainButton" id="test2">スタンプ</button></li>
<li class="list4"><button class="MainButton" id="test3">戻る</button></li>
<div class="content" id="test">
<img src="../stamp/img/1540-1024.jpg" alt="test" style="height: 40%;width: 100%; object-fit: cover;">
<hr style="width: 90%;">
<h1>松ヶ岡開墾場</h1>
<button class="backbtn" id="back">閉じる</button>
</div>
<a-scene>
<a-sky color="#ECECEC"></a-sky>
<a-entity position="0 0 0">
<a-camera look-controls wasd-controls position="0 0 0">
<a-gui-cursor id="cursor"
fuse="true" fuse-timeout="1000"
debusign="ring"
>
</a-camera>
</a-gui-cursor>
</a-entity>
</a-entity>
<a-box id="box" cursor-listener position="0 0 -3" rotation="0 30 0" color="#4CC3D9"></a-box>
</a-scene>
<script type="text/javascript">
const boxEl = document.querySelector('a-box');
const $content = document.getElementById('test');
const $back = document.getElementById('back');
let $test = [], i=0;
while (i < 4) {
$test[i]= document.getElementById('test'+ i);
i++;
}
$back.addEventListener('click',function () {
let x=0;
while (x < 4){
$content.style.display = "none"
$test[x].style.animationName = "fadein";
$test[x].style.opacity="1";
// $test[x].style.display="block";
x++;
}
})
boxEl.addEventListener('click', function () {
let x=0;
while (x < 4){
$test[x].style.animationName = "fadein";
$test[x].style.opacity="1";
$test[x].style.display="block";
x++;
}
});
$test[0].addEventListener('click',function () {
$content.style.animeationName = "fade";
$content.style.display = "block";
let x=0;
while (x < 4) {
$test[x].style.animationName = "fadeout";
$test[x].style.opacity="0";
x++;
}
});
$test[3].addEventListener('click', function () {
let x = 0;
while (x < 4) {
$test[x].style.animationName = "fadeout";
$test[x].style.opacity="0";
x++;
}
});
</script>
</body>
</html>
Satou Fumiya