-
Notifications
You must be signed in to change notification settings - Fork 19
/
index.html
52 lines (46 loc) · 3.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<html>
<head>
<meta charset="utf-8">
<title>aframe-fonts🅰️📖👌</title>
<meta name="description" content="Aframe-Equalizer">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/zcanter/aframe-gradient-sky/master/dist/gradientsky.min.js"></script>
</head>
<body>
<a-scene>
<!-- BEGIN: ENVIRONMENT -->
<a-gradient-sky material="shader: gradient; topColor: 255 82 82; bottomColor: 255 100 100;"></a-gradient-sky>
<!-- END: ENVIRONMENT -->
<!-- BEGIN: DEMO -->
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/berkshireswash/BerkshireSwash-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/creepster/Creepster-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/crimsontext/CrimsonText-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/giveyouglory/GiveYouGlory.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/miltoniantattoo/MiltonianTattoo-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/snippet/Snippet.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/specialelite/SpecialElite-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/syncopate/Syncopate-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<a-entity text="value:Hello; color:#FFFFFF; shader: msdf; font:https://raw.githubusercontent.com/etiennepinchon/aframe-fonts/master/fonts/yesteryear/Yesteryear-Regular.json;" scale="15 15 15" position="6.7 1 -2"></a-entity>
<!-- END: DEMO -->
</a-scene>
<script type="text/javascript">
let els = document.querySelectorAll('[text]');
let current = 0, total = els.length;
let hideAll = ()=> {
for (let el of els) {
el.setAttribute('visible', false);
}
}
let show = ()=>{
hideAll();
if (current > total-1) {
current = 0;
}
els[current].setAttribute('visible', true);
current++;
}
show();
setInterval(show, 300);
</script>
</body>
</html>