-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
105 lines (82 loc) · 7.49 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Build/assets/css/style.css" rel="stylesheet">
<link href="assets/favicon.ico" rel="shortcut icon">
<link href="assets/apple-touch-icon.png" rel="apple-touch-icon">
<title>AvalonA</title>
</head>
<body data-outter="body-3d"> <!-- Mouse event layer -->
<button id="enable">Enable</button>
<button id="disable">Disable</button>
<button id="release">Release</button>
<button id="release2">Release 1</button>
<button id="release3">Release 2</button>
<button id="freeze">Freeze</button>
<button id="freeze2">Freeze 1</button>
<button id="freeze3">Freeze 2</button>
<button id="hide">Hide</button>
<button id="show">Show</button>
<button id="shuffle-all">Shuffle all</button>
<button id="shuffle-one">Shuffle one</button>
<div id="frame-3d">
<div>Before frame</div>
<div>
Frame wrapper
<div data-inner="aa3d" id="aa3d" > <!-- 3d layer changing orientation -->
<div class="gravity">
<div class="gravity">
<div id="half-circle" at="oz: 0.33; z:-42; rx:104; ry:316; rz:35" ></div>
</div>
<div id="rectangle" at="z:30; rx:194; ry:42; rz:288" >
<div at="z:-61; rx:105; ry:232; rz:287" >
<button id="enable3" >Enable</button>
<button id="disable3" >Disable</button>
</div>
<div class="gravity">
<div id="square" at="ox: 0.15; x:100; y:200; z:-189; rx:259; ry:302; rz:341" >
<div class="gravity">
<div id="inner-square" at="oy: 0.75; z:144; rx:230; ry:332; rz:359" >
<a at="z:122; rx:7; ry:211; rz:245" href="http://www.amazon.com" >a.com</a>
</div>
</div>
</div>
</div>
<div class="gravity">
<div id="circle" at="oy: 0; z:92; rx:261; ry:336; rz:282" ></div>
</div>
<div id="text">
Lorem ipsum dolor sit amet, consectetur <a href="http://www.amazon.com">adipiscing</a> elit. Ut aliquet <a href="#to">cursus</a> enim, et varius nibh dictum non. Ut tincidunt augue in urna vestibulum at venenatis metus cursus. Phasellus porta tortor sit amet elit elementum id faucibus purus facilisis. Mauris pharetra consequat mi, non mattis ligula feugiat eget. Vivamus consectetur orci ac mauris dignissim egestas. Aliquam erat volutpat. Sed imperdiet, lorem eget feugiat laoreet, enim diam pulvinar est, at sodales nulla metus at nisi. Etiam at hendrerit ligula. Sed eget est posuere tellus accumsan tempor sed rhoncus ipsum. Sed augue tortor, laoreet ac congue id, sagittis at nunc. Fusce a magna convallis lorem euismod porttitor sit amet vitae magna. Nulla lacus purus, volutpat sed rutrum non, tempor in tellus. Cras vel mi ac augue eleifend bibendum.
Nam pharetra risus vel metus commodo in hendrerit tortor facilisis. Duis ultrices dictum sapien a posuere. Sed nisi felis, faucibus et semper eget, aliquam sit amet arcu. Aliquam pulvinar vulputate erat ut tempor. Sed at tellus neque. Donec sed adipiscing tortor. Suspendisse potenti. Sed quis molestie libero.
Suspendisse adipiscing, odio non euismod venenatis, mauris lectus porttitor lorem, vel fringilla est odio nec purus. Aenean elementum, nisl at euismod interdum, elit erat hendrerit lorem, et pharetra purus justo at felis. Integer blandit felis orci, ut luctus justo. Nullam et libero quis est egestas elementum. Pellentesque elit mauris, fermentum sit amet sagittis quis, ullamcorper ut dolor. Phasellus commodo vestibulum tortor quis dignissim. Suspendisse et erat vel dolor sagittis sodales. Fusce convallis tempus feugiat. Donec dolor nibh, vulputate non ultrices eu, aliquam sit amet ante. Nullam id tortor est, a faucibus sem. Phasellus fermentum aliquam erat non consequat. Aliquam porttitor odio convallis nulla lobortis malesuada ornare augue laoreet. Nullam eget ipsum eu quam pulvinar auctor non in purus.
Donec at ligula non ante condimentum fermentum. Donec at ipsum vel justo viverra adipiscing. Quisque rutrum felis sed nisl sollicitudin ut porta nisi varius. Phasellus volutpat hendrerit porttitor. Donec et sapien eu nisi facilisis mattis quis ac metus. Quisque vitae enim eu nisi interdum fringilla. Proin sodales venenatis tellus, eu scelerisque elit accumsan id. Donec eu suscipit justo. In vel ipsum sit amet nisl tincidunt facilisis at eu sem. Pellentesque non neque ac risus pretium interdum. Sed lacinia neque id velit egestas nec consequat elit tempus. Aenean tempus ultricies purus volutpat vehicula. Fusce justo massa, sagittis sed convallis quis, pulvinar non dolor.
Donec tempor molestie lacus quis cursus. Nunc egestas, dolor interdum sagittis pellentesque, nulla mauris fringilla mi, non tempor metus enim in odio. Nunc placerat, massa sed mollis imperdiet, eros mauris lobortis nulla, ut imperdiet lectus nibh nec lectus. Proin non turpis libero. Nunc hendrerit eros orci, quis pretium nisi. Vivamus gravida placerat sapien, sit amet viverra sapien molestie sed. Aenean quam diam, tincidunt ut imperdiet non, malesuada ac leo. Vivamus egestas luctus sapien eu lobortis. Maecenas eget nisi enim, in bibendum nulla. In risus ante, bibendum sed aliquet non, ultrices sed lorem. Donec pellentesque pharetra augue nec eleifend. In tempus pellentesque varius. Donec lacinia dui malesuada dui facilisis ut <strong id="to">porta est tempor</strong>.
</div>
</div>
</div>
</div>
</div>
<div>After frame
Nam pharetra risus vel metus commodo in hendrerit tortor facilisis. Duis ultrices dictum sapien a posuere. Sed nisi felis, faucibus et semper eget, aliquam sit amet arcu. Aliquam pulvinar vulputate erat ut tempor. Sed at tellus neque. Donec sed adipiscing tortor. Suspendisse potenti. Sed quis molestie libero.
Suspendisse adipiscing, odio non euismod venenatis, mauris lectus porttitor lorem, vel fringilla est odio nec purus. Aenean elementum, nisl at euismod interdum, elit erat hendrerit lorem, et pharetra purus justo at felis. Integer blandit felis orci, ut luctus justo. Nullam et libero quis est egestas elementum. Pellentesque elit mauris, fermentum sit amet sagittis quis, ullamcorper ut dolor. Phasellus commodo vestibulum tortor quis dignissim. Suspendisse et erat vel dolor sagittis sodales. Fusce convallis tempus feugiat. Donec dolor nibh, vulputate non ultrices eu, aliquam sit amet ante. Nullam id tortor est, a faucibus sem. Phasellus fermentum aliquam erat non consequat. Aliquam porttitor odio convallis nulla lobortis malesuada ornare augue laoreet. Nullam eget ipsum eu quam pulvinar auctor non in purus.
</div>
</div>
<div id="a3d2">
<div at="z:100">
<div at="z:50">
<button id="enable2">Enable</button>
<button id="disable2">Disable</button>
</div>
</div>
</div>
<script src="dist/SpeedTester.min.js"></script>
<script>
//window.GreenSockGlobals = {};
//window.requestAnimationFrame = window.webkitRequestAnimationFrame = window.mozRequestAnimationFrame = window.oRequestAnimationFrame = undefined;
var speedTester = new SpeedTester(3).run();
</script>
<script src="Build/assets/js/app.js"></script>
</body>
</html>