-
Notifications
You must be signed in to change notification settings - Fork 1
/
hover.html
120 lines (104 loc) · 2.6 KB
/
hover.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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<! DOCTYPE HTML>
<html>
<head>
<title>OASIS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
</head>
<body>
` <section>
<div id="container"></div>
</section>
<style>
#container
{
border-color: black;
border: solid;
background-color: pink;
}
svg
{
display: block;
margin: auto;
}
section
{
position: relative;
min-height: 100px;
height: 100vh;
justify-content: center;
align-items: center;
display: flex;
}
</style>
<script >
var assets = [{url:'assets/Exports/Octa4.svg',x:50,y:50,offset:-0.2},
{url:'assets/Exports/Octa3.svg',x:50,y:50,offset:0},
{url:'assets/Exports/Octa4.svg',x:448,y:-7,offset:0},
{url:'assets/Exports/Octa1.svg',x:350,y:738,offset:0},
{url:'assets/Exports/Octa2.svg',x:863,y:0,offset:0},
{url:'assets/Exports/Octa1.svg',x:50,y:340,offset:0},
{url:'assets/Exports/Octa3.svg',x:876,y:230,offset:0}],
layers=[],
w=1000,
h=700,
loaded=0,
container=document.getElementById('container'),
s=new Snap(w,h),
c,
g;
container.appendChild(s.node);
TweenMax.set(s.node,{scale:0.1});
g=s.g();
c=s.g();
g.append(c);
for(var i=0;i<assets.length;i+=1)
{
var img=new Image();
img.src=assets[i].url;
img.onload=handle_load;
var _img=s.image(assets[i].url,assets[i].x,assets[i].y);
c.append(_img);
layers.push(_img);
}
function handle_load()
{
loaded+=1;
if(loaded==assets.length)
{
handle_loaded();
}
}
function handle_loaded()
{
container.addEventListener('mousemove',handle_mousemove);
container.addEventListener('mouseout',handle_mouseout);
container.addEventListener('mouseover',handle_mouseover);
}
/* function handle_mousemove(e)
{
var dx = e.OffsetX - (w/2);
var dy= e.offsetY - (h/2);
for(var i=0;i<layer.length;i+=1)
{
var l= layers[i];
var _x=dx*assets[i].offset;
var _y=dy*asstes[i].offset;
TweenMax.to(l.node,0.1,{x: _x,y:_y});
}
}
function handle_mouseout(e)
{
for(var i=0;i<layers.length;i+=1)
{
var l=layers[i];
TweenMax.to(s.node,0.2,{scale:0.1,ease:Quad.easeOut});
}
}
function handle_mouseover(e)
{
TweenMax.to(s.node,0.2,{scale:0.3,ease:Back.easeOut});
}*/
</script>
</body>
</html>