<html>
<head>
<title> UI</title>
<!-- --------- IMPORTED LIBRARIES ------>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
<script src="https://unpkg.com/aframe-event-set-component@^3.0.0/dist/aframe-event-set-component.min.js"></script>
<!-- Event Set component By NgoKevin -->
</head>
<body>
<a-scene> <!-- Creating scene -->
<!-- --------- SKY --------- -->
<a-sky id="background-img" color="#EBEBEB"></a-sky>
<!-- ---------TOOLTIP --------- -->
<a-plane id="tooltip_target" position="0 1 -1" height="2" width="3" rotation="0 0 0" color="tomato" visible="true"
event-set__1="_event: mouseenter; _target:#tooltip_text; opacity: 1;"
event-set__2="_event: mouseleave; _target:#tooltip_text; opacity: 0;"
event-set__3="_event: mouseenter; _target:#tooltip_toggle;opacity: 1;"
event-set__4="_event: mouseleave; _target:#tooltip_toggle; opacity: 0;"
>
<a-text value="Hover here" position="0 0 0" align="center"></a-text>
</a-plane>
<a-plane id="tooltip_toggle" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 0 0" position="0 1 0" opacity="0" visible="true" color="#f7ae04">
<!-- By using the event set component we can trigger events without javascript, but they don't "last", they happen during the event.
The target is the element affected by the change you want to apply-->
<a-text id="tooltip_text" text="value:Hello VR World" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" position="0 0 0" rotation="0 0 0" visible="true">
</a-text>
</a-plane>
<!-- --------- POP-UP BTN FADE IN & OUT --------- -->
<a-plane class="plane_target_fade" position="3 1 -1" height="2" width="3" rotation="0 0 0" color="#000000" visible="true">
<a-text value="POP-UP " position="0 0 0" align="center"></a-text>
</a-plane>
<a-plane class="plane_toggle_fade" color="#FC00CF" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 0 0" position="3 1 0" visible="true" material= "transparent:true" opacity="0">
<a-text class="plane_text_fade" text="value: Hello 2 u 2!" color="#FFFFFF" align="center" opacity="0" scale="2 2 2" position="0 0 0" rotation="0 0 0" visible="true">
</a-text>
<!--Even though the text is before the animations, it's affected by them as well -->
<a-animation begin="mouseenter" end="mouseleave"
attribute="material.opacity"
from="0" to="1" dur="3000">
</a-animation>
<a-animation begin="mouseleave"
attribute="material.opacity"
from="1" to="0" dur="3000" delay="3000">
</a-animation>
</a-plane>
<!-- --------- POP-UP BTN FADE IN/SCALE OUT--------- -->
<a-plane class="plane_target_fadeIn" position="-3 1 -1" height="2" width="3" rotation="0 0 0" color="#ffffff" visible="true" >
<a-text value="Modal" position="0 0 0" align="center" color="black"></a-text>
</a-plane>
<a-plane class="plane_toggle_fadeIn" id="fadeIn_toggle" material="transparent:true" color="#2621c4" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 0 0" position="-3 1 0" opacity="0">
<a-animation begin="mouseenter"
attribute="material.opacity"
from="0" to="1" dur="3000">
</a-animation>
<a-animation begin="mouseenter"
attribute="scale"
from="0.8 0.8 0.8" to="2 2 2" dur="3000">
</a-animation>
<a-animation begin="mouseleave"
attribute="material.opacity"
to="0" from="1" dur="3000">
</a-animation>
<a-animation begin="mouseleave"
attribute="scale"
to="0.8 0.8 0.8" from="2 2 2" dur="3000">
</a-animation>
<a-text class="plane_text_fadeIn" id="fadeIn_text" text="value: Modal Pop-up" color="#ffffff" align="center" opacity="0" scale="1 1 1" position="0 0 0" rotation="0 0 0" visible="true">
</a-text>
</a-plane>
<!-- --------- DROPDOWN BTN --------- -->
<!-- This is the only element that uses Js
To close the Dropdown, leave the target, re-enter and leave again
It works this way: You open the Dropdown to see the links, you leave the trigger to choose a link, and then return to the dropdown and close it
It closes after 3 seconds because of the SetTimeout on Js-->
<a-plane class="dropdown_target" position="6 1 -1" height="2" width="3" rotation="0 0 0" color="teal" visible="true">
<a-text value="Dopdown" position="-0.5 0 0"></a-text>
</a-plane>
<a-plane class="dropdown_toggle" color="#21c4bb" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 0 0" position="5 -0.25 0" opacity="0" visible="true">
<a-text class="dropdown_text" text="value: Thing 1" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" position="0 0 0" rotation="0 0 0" visible="true">
</a-text>
</a-plane>
<a-plane class="dropdown_toggle" color="#21c4bb" height="1.25" width="2.5" scale="0.8 0.8 0.8" rotation="0 0 0" position="5 -1 0" opacity="0" visible="true" >
<a-text class="dropdown_text" text="value:Thing 2" color="#FFFFFF" align="center" opacity="0" scale="0.5 0.5 0.5" position="0 0 0" rotation="0 0 0" visible="true">
</a-text>
</a-plane>
<!-- --------- CAMERA AND CURSOR --------- -->
<a-camera look-controls-enabled wasd-controls-enabled position="0 0 5">
<a-cursor position="0 0 0"
geometry="primitive: ring; radiusOuter: 0.030; radiusInner: 0.020;"
material="color: #11d8c4; shader: flat"
fuse="true" timeout="10">
<a-animation begin="click" easing="ease-in" attribute="color"
fill="backwards" from="#000000" to="#ffffff"></a-animation>
<a-animation begin="cursor-hovering" easing="ease-in" attribute="scale"
fill="forwards" from="1 1 1" to="0.5 0.5 0.5"></a-animation>
</a-cursor>
</a-camera>
</a-scene>
</body>
</html>
//-- --------- HIDE AND SHOW DROPDOWN ---------
var count=0;
document.querySelector('.dropdown_target').addEventListener('mouseenter', function () {
count+=1;
var toggleD = document.querySelectorAll('.dropdown_toggle');
for(var i=0; i<toggleD.length; i++){
toggleD[i].setAttribute('opacity', 100);
}
var textD = document.querySelectorAll('.dropdown_text');
for(var i=0; i<textD.length; i++){
textD[i].setAttribute('opacity', 100);
}
});
document.querySelector('.dropdown_target').addEventListener('mouseleave', function () {
if(count%2==0){
setTimeout(function () {
var toggleD = document.querySelectorAll('.dropdown_toggle');
for(var i=0; i<toggleD.length; i++){
toggleD[i].setAttribute('opacity', 0);
}
var textD = document.querySelectorAll('.dropdown_text');
for(var i=0; i<textD.length; i++){
textD[i].setAttribute('opacity', 0);
}
}, 3000);
}
});
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.