-
Notifications
You must be signed in to change notification settings - Fork 19
/
trash.html
executable file
·141 lines (129 loc) · 6.6 KB
/
trash.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<html>
<script src="snap.svg-min.js"></script>
<svg id="trash" fill="#FFFFFF" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="120px" height="120px" viewBox="0 0 768 768" enable-background="new 0 0 768 768" xml:space="preserve">
<g>
<g>
<path d="M480.461,364.985c-7.005,47.032-14.009,94.064-21.014,141.095c-4.141,27.803-8.282,55.607-12.423,83.411
c-0.939,6.306,8.696,9.019,9.643,2.658c7.005-47.032,14.009-94.064,21.014-141.095c4.141-27.804,8.282-55.607,12.423-83.411
C491.043,361.338,481.409,358.625,480.461,364.985L480.461,364.985z"/>
</g>
</g>
<g>
<g>
<path d="M278.997,449.226c36.851,30.853,73.701,61.706,110.552,92.56c19.489,16.317,38.978,32.634,58.467,48.952
c4.908,4.109,12.021-2.926,7.071-7.071c-36.851-30.853-73.701-61.706-110.552-92.56c-19.489-16.317-38.978-32.634-58.467-48.952
C281.16,438.045,274.047,445.081,278.997,449.226L278.997,449.226z"/>
</g>
</g>
<g>
<g>
<path d="M304.039,595.82c47.913,0,95.827,0,143.74,0c1.356,0,2.711,0,4.067,0c6.449,0,6.449-10,0-10c-47.913,0-95.827,0-143.74,0
c-1.356,0-2.711,0-4.067,0C297.591,585.82,297.591,595.82,304.039,595.82L304.039,595.82z"/>
</g>
</g>
<g>
<g>
<path d="M265.781,366.644c7.005,47.032,14.009,94.064,21.014,141.095c4.141,27.804,8.282,55.607,12.423,83.411
c0.947,6.36,10.582,3.647,9.643-2.658c-7.005-47.032-14.009-94.064-21.014-141.095c-4.141-27.804-8.282-55.607-12.423-83.411
C274.477,357.625,264.842,360.338,265.781,366.644L265.781,366.644z"/>
</g>
</g>
<g>
<g>
<path d="M270.603,370.315c48.332,0,96.664,0,144.996,0c23.228,0,46.456,0,69.684,0c6.449,0,6.449-10,0-10
c-48.332,0-96.664,0-144.996,0c-23.228,0-46.456,0-69.684,0C264.154,360.315,264.154,370.315,270.603,370.315L270.603,370.315z"/>
</g>
</g>
<g>
<g>
<path d="M271.173,377.997c35.934,29.472,71.868,58.944,107.802,88.416c25.945,21.28,51.891,42.56,77.836,63.839
c4.942,4.054,12.061-2.979,7.071-7.071c-35.934-29.472-71.868-58.944-107.802-88.416c-25.945-21.28-51.891-42.56-77.836-63.839
C273.302,366.873,266.183,373.905,271.173,377.997L271.173,377.997z"/>
</g>
</g>
<g>
<g>
<path d="M335.099,369.697c39.316,30.276,78.633,60.551,117.949,90.827c3.975,3.061,7.95,6.122,11.925,9.183
c5.11,3.935,10.08-4.759,5.047-8.635c-39.316-30.276-78.633-60.551-117.949-90.827c-3.975-3.061-7.95-6.122-11.925-9.183
C335.036,357.127,330.066,365.822,335.099,369.697L335.099,369.697z"/>
</g>
</g>
<g>
<g>
<path d="M290.596,521.461c31.625,24.353,63.25,48.705,94.874,73.058c5.11,3.935,10.08-4.759,5.047-8.635
c-31.625-24.353-63.25-48.705-94.874-73.058C290.533,508.891,285.563,517.585,290.596,521.461L290.596,521.461z"/>
</g>
</g>
<g>
<g>
<path d="M410.386,371.054c21.624,16.651,43.247,33.302,64.871,49.954c5.11,3.935,10.08-4.759,5.047-8.635
c-21.624-16.651-43.247-33.302-64.871-49.954C410.323,358.485,405.353,367.179,410.386,371.054L410.386,371.054z"/>
</g>
</g>
<g id="lid">
<path stroke="#FFFFFF" stroke-width="5" stroke-miterlimit="10" d="M491.333,348.333c0-2.761-2.239-5-5-5H271.603
c-2.761,0-5,2.239-5,5l0,0c0,2.761,2.239,5,5,5h214.731C489.095,353.333,491.333,351.095,491.333,348.333L491.333,348.333z"/>
<path stroke="#FFFFFF" stroke-miterlimit="10" d="M425,345.833c0,3.038-20.897,5.5-46.675,5.5l0,0
c-25.778,0-46.675-2.462-46.675-5.5V331.5c0-3.038,20.897-5.5,46.675-5.5l0,0c25.778,0,46.675,2.462,46.675,5.5V345.833z"/>
</g>
<g>
<g>
<g>
<path d="M469.002,442.81c-36.851,30.853-73.701,61.706-110.552,92.56c-19.489,16.317-38.978,32.634-58.467,48.952
c-4.95,4.145,2.163,11.18,7.071,7.071c36.851-30.853,73.701-61.706,110.552-92.56c19.489-16.317,38.978-32.634,58.467-48.952
C481.024,445.737,473.911,438.701,469.002,442.81L469.002,442.81z"/>
</g>
</g>
<g>
<g>
<path d="M476.827,371.582c-35.934,29.472-71.868,58.944-107.802,88.416c-25.945,21.28-51.891,42.56-77.836,63.839
c-4.99,4.092,2.129,11.125,7.071,7.071c35.934-29.472,71.868-58.944,107.802-88.416c25.945-21.28,51.891-42.56,77.836-63.839
C488.887,374.56,481.769,367.528,476.827,371.582L476.827,371.582z"/>
</g>
</g>
<g>
<g>
<path d="M414.925,361.718c-39.316,30.276-78.633,60.551-117.949,90.827c-3.975,3.061-7.95,6.122-11.925,9.183
c-5.033,3.875-0.063,12.57,5.047,8.635c39.316-30.276,78.633-60.551,117.949-90.827c3.975-3.061,7.95-6.122,11.925-9.183
C425.004,366.477,420.035,357.783,414.925,361.718L414.925,361.718z"/>
</g>
</g>
<g>
<g>
<path d="M459.428,513.481c-31.625,24.353-63.25,48.705-94.874,73.058c-5.033,3.875-0.063,12.57,5.047,8.635
c31.625-24.353,63.25-48.705,94.874-73.058C469.507,518.241,464.538,509.546,459.428,513.481L459.428,513.481z"/>
</g>
</g>
<g>
<g>
<path d="M343.432,361.952c-21.826,16.807-43.652,33.614-65.477,50.421c-5.033,3.875-0.063,12.57,5.047,8.635
c21.826-16.807,43.652-33.614,65.477-50.421C353.512,366.712,348.542,358.017,343.432,361.952L343.432,361.952z"/>
</g>
</g>
</g>
</svg>
<script>
window.onload = function () {
var trash = Snap.select("#trash");
var lid = Snap.select("#lid");
var timer;
var tUp = new Snap.Matrix();
tUp.translate(0, -30);
var tDown = new Snap.Matrix();
tDown.translate(0, 0);
function revert() {
lid.animate({
transform: tDown
}, 300, mina.easein);
}
function open() {
clearTimeout(timer);
lid.animate({
transform: tUp
}, 350, mina.easein, function () { setTimeout(revert, 400); });
}
trash.click(open);
}
</script>
</html>