-
Notifications
You must be signed in to change notification settings - Fork 5
/
test.html
148 lines (131 loc) · 9.41 KB
/
test.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
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<style type="text/css">
.star {float: left; margin: -5px;}
/* HACK: because of the translate in the star SVG */
.star path {transform-origin: 40% 35% 0;}
.flame path {transform-origin: 50% 65% 0;}
</style>
</head>
<body>
<script src="lib/anime.min.js"></script>
<script src="lib/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
console.log( "ready!" );
var starSettings = {
star0: {color: '#FFF', layer: '0_face'},
star1: {color: '#8cc2c0', layer: '1_face'},
star3: {color: '#99dc54', layer: '3_face'},
star5: {color: '#ffdc54', layer: '5_face'},
flame: {color: '#c9acc8', layer: 'face'},
};
// turn off the default face and color to white
$( "#interactive_star #color path" ).attr("fill", "#FFF");
$( "#interactive_star #"+starSettings.star0.layer).attr("display", "none");
// Copy to the correct elements
$( "#interactive_star" ).clone().appendTo( ".star" );
$( ".star svg" ).attr("display", "visible");
$( ".star svg" ).attr("clicked", false);
$( "#interactive_flame #color path" ).attr("fill", "#FFF");
$( "#interactive_flame" ).clone().appendTo( ".flame" );
// turn on the correct face
function onStarClick(){
var clicked = $(this).attr('clicked');
var bg = $('#color path', this)[0];
var nr = $(this).parent().attr("data-value");
var color = starSettings[nr].color;
$("#"+starSettings[nr].layer, this).attr("display", "visible");
var basicTimeline = anime.timeline();
if (clicked == 'true'){
console.log('unclick');
$(this).attr('clicked', false);
basicTimeline
.add({
targets: bg,
scale: 1.3,
duration: 200,
easing: 'easeInSine'
})
.add({
targets: bg,
offset: 200,
duration: 500,
fill: '#FFF'
})
.add({
targets: bg,
scale: 1,
offset: 400,
duration: 200,
});
} else {
console.log('click');
$(this).attr('clicked', true);
$('#color path', this).attr('fill', color);
var click_anim = anime({
targets: bg,
scale: 1.3,
direction: 'alternate',
duration: 200,
easing: 'easeInSine'
});
}
}
$( ".star svg" ).click(onStarClick);
$( ".flame svg" ).click(onStarClick);
});
</script>
<div>
<div class="star" data-value="star5"></div>
<div class="star" data-value="star3"></div>
<div class="star" data-value="star1"></div>
<div class="flame" data-value="flame"></div>
</div>
<div style="display:none">
<svg xmlns="http://www.w3.org/2000/svg" id="interactive_star" width="87.605" height="84.588" viewBox="0 0 84.236 87.971">
<g transform="translate(10.943 19.533)" id="color">
<path id="path4223" d="M11.145 56.558c-1.2-.746-.667-9.776 1.12-18.957.278-1.43.507-2.847.507-3.149 0-.437-.995-1.546-4.953-5.513-6.332-6.347-9.61-10.417-9.61-11.932 0-.258.267-.59.676-.839 2.043-1.246 9.232-2.915 17.009-3.948 4.64-.617 4.269-.478 4.909-1.838C22.1 7.624 25.13 1.652 26.03.08c2.478-4.331 5.126-7.837 5.92-7.837.514 0 2.341 2.084 3.77 4.299 1.99 3.087 3.255 5.388 5.677 10.34 1.212 2.474 2.3 4.56 2.42 4.633.118.074 2.381.445 5.028.826 9.208 1.325 15.65 2.994 16.773 4.347.835 1.006-3.17 6.07-10.574 13.37l-4.06 4.003.759 4.214c1.717 9.535 2.204 16.522 1.255 18.015-.27.425-.414.467-1.177.345-3.183-.507-9.842-3.365-17.02-7.304-1.329-.73-2.605-1.327-2.835-1.327-.23 0-1.181.423-2.116.94-2.704 1.495-8.923 4.57-11.284 5.578-3.593 1.535-6.808 2.417-7.42 2.036" fill="#dcdcdc"/>
</g>
<g transform="translate(10.943 19.533)" id="star">
<path d="M44.83 10.034c-2.314-5.1-9.044-19.167-12.868-19.167-3.827 0-10.556 14.065-12.87 19.165-5.569.64-21.037 2.728-22.203 6.314-1.166 3.588 10.122 14.37 14.251 18.157-1.113 5.495-3.908 20.855-.857 23.07.43.312.993.464 1.727.464 4.687 0 17.308-6.93 19.948-8.409 2.64 1.48 15.26 8.41 19.95 8.41.73 0 1.295-.154 1.726-.465 3.051-2.22.254-17.576-.861-23.069 4.13-3.789 15.424-14.575 14.257-18.16-1.162-3.58-16.63-5.672-22.2-6.31m6.273 23.436a.951.951 0 0 0-.288.892c1.989 9.624 3.15 20.633 1.708 21.683-.005.004-.148.104-.615.104-3.85 0-15.366-6.083-19.482-8.427a.93.93 0 0 0-.467-.124.93.93 0 0 0-.466.124c-4.116 2.344-15.632 8.426-19.482 8.426-.376 0-.563-.065-.615-.102-1.307-.95-.526-10.88 1.705-21.685a.945.945 0 0 0-.289-.891C5.548 26.854-1.863 18.63-1.312 16.932c.55-1.696 11.382-3.995 21.15-5.08a.945.945 0 0 0 .758-.551c4.02-8.956 9.546-18.542 11.366-18.542 1.817 0 7.342 9.586 11.364 18.544a.944.944 0 0 0 .759.551c9.768 1.085 20.597 3.383 21.148 5.079.5 1.534-5.971 9.106-14.13 16.537" id="path3049-3"/>
</g>
<g transform="translate(10.943 19.533)" id="0_face">
<path id="ellipse3006" d="M23.976 20.688c0 1.566-.846 2.836-1.89 2.836-1.045 0-1.892-1.27-1.892-2.836 0-1.567.847-2.836 1.891-2.836 1.045 0 1.891 1.27 1.891 2.836"/>
<path id="ellipse3008" d="M42.887 20.688c0 1.566-.846 2.836-1.89 2.836-1.045 0-1.892-1.27-1.892-2.836 0-1.567.847-2.836 1.891-2.836 1.045 0 1.891 1.27 1.891 2.836"/>
<path id="circle3010" d="M35.323 29.197a3.782 3.782 0 1 1-7.564 0 3.782 3.782 0 0 1 7.564 0"/>
</g>
<g transform="translate(10.943 19.533)" id="1_face" display="none">
<path id="ellipse3119" d="M24.755 23.845c0 1.567-.846 2.837-1.89 2.837-1.045 0-1.892-1.27-1.892-2.837 0-1.566.847-2.836 1.891-2.836 1.045 0 1.891 1.27 1.891 2.836"/>
<path id="ellipse3121" d="M43.667 23.845c0 1.567-.847 2.837-1.892 2.837-1.044 0-1.89-1.27-1.89-2.837 0-1.566.846-2.836 1.89-2.836 1.045 0 1.892 1.27 1.892 2.836"/>
<path d="M39.884 33.3H24.755a.945.945 0 1 0 0 1.892h15.13a.945.945 0 1 0 0-1.892" id="path3125"/>
</g>
<g transform="translate(10.943 19.533)" id="3_face" display="none">
<path id="ellipse3195" d="M24.282 21.169c0 1.566-.847 2.836-1.892 2.836-1.044 0-1.89-1.27-1.89-2.836 0-1.567.846-2.836 1.89-2.836 1.045 0 1.892 1.27 1.892 2.836"/>
<path id="ellipse3197" d="M43.193 21.169c0 1.566-.847 2.836-1.892 2.836-1.044 0-1.89-1.27-1.89-2.836 0-1.567.846-2.836 1.89-2.836 1.045 0 1.892 1.27 1.892 2.836"/>
<path d="M37.52 26.841a.945.945 0 0 0-.947.946 4.733 4.733 0 0 1-4.728 4.728 4.732 4.732 0 0 1-4.728-4.728.945.945 0 1 0-1.892 0c0 3.65 2.969 6.619 6.618 6.619 3.649 0 6.618-2.97 6.618-6.619a.94.94 0 0 0-.942-.946" id="path3201"/>
</g>
<g transform="translate(10.943 19.533)" id="5_face" opacity=".94" display="none">
<path id="ellipse3043" d="M24.372 17.276c0 1.566-.847 2.836-1.891 2.836-1.045 0-1.891-1.27-1.891-2.836 0-1.567.846-2.836 1.89-2.836 1.045 0 1.892 1.27 1.892 2.836"/>
<path id="ellipse3045" d="M43.283 17.276c0 1.566-.847 2.836-1.891 2.836-1.045 0-1.891-1.27-1.891-2.836 0-1.567.846-2.836 1.89-2.836 1.045 0 1.892 1.27 1.892 2.836"/>
<path d="M41.188 22.423H22.277a1.891 1.891 0 0 0-1.82 2.398c.078.287 2.066 7.058 11.275 7.058 9.212 0 11.198-6.77 11.278-7.058a1.891 1.891 0 0 0-1.822-2.398" id="path3047"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="80" viewBox="0 0 53.125 72.28" id="interactive_flame">
<g id="color" transform="translate(4.052 3.638)">
<path d="M17.507 62.483C8.797 60.037 2.664 51.834 2.664 42.63c0-5.805.967-9.102 5.052-17.215 2.046-4.064 3.882-8.425 4.081-9.69l.087-2.863 1.628 1.847c2.323 2.635 4.816 5.268 5.08 10.584.187 3.765-.745 5.158-.103 5.409 1.123.439 2.552-2.547 4.678-7.059 2.137-4.535 1.893-9.248.056-14.708-.66-1.962-4.248-9.517.119-4.955 2.988 3.122 8.453 8.361 10.8 11.733 5.515 7.928 8.289 16.865 8.345 26.055.032 5.143-.105 5.901-1.667 9.244-4.289 9.18-14.166 14.041-23.313 11.472" id="path4140-3" fill="#c9acc8"/>
</g>
<g id="line" transform="translate(4.052 3.638)">
<path d="M20.066 1.51A.938.938 0 1 0 18.7 2.67l.654 1.515c3.682 8.52 6.228 14.407.597 22.456.126-6.87-2.792-12.336-8.705-16.28a.946.946 0 0 0-1.073.022.94.94 0 0 0-.348 1.016c1.342 4.703-.628 8.077-3.122 12.351C4.14 28.145.95 33.612.948 42.075v.006c.003 11.878 9.663 21.542 21.54 21.555.006.002.014.006.023.006 11.89 0 21.562-9.674 21.562-21.562 0-16.313-8.526-30.722-24.007-40.57m2.46 60.255c-.006 0-.01-.004-.016-.004-10.856 0-19.686-8.829-19.688-19.686 0-7.956 2.922-12.964 5.5-17.382 2.207-3.779 4.158-7.127 3.77-11.373 4.842 4.022 6.721 9.356 5.74 16.236a.935.935 0 0 0 .541.985.932.932 0 0 0 1.1-.244c8.345-9.737 6.038-16.514 2.211-25.444 13.257 9.406 20.513 22.521 20.513 37.224.001 10.852-8.823 19.68-19.672 19.688" id="path3260"/>
</g>
<g id="face" transform="translate(4.052 3.638)">
<path d="M15.143 44.17a4.26 4.26 0 0 0-.062-.687l-2.985-1.492c-.425.515-.703 1.292-.703 2.18 0 1.552.838 2.811 1.875 2.811s1.875-1.259 1.875-2.812" id="path3262"/>
<path d="M32.018 46.983c1.037 0 1.875-1.26 1.875-2.812 0-.887-.278-1.664-.703-2.179l-2.985 1.492a4.249 4.249 0 0 0-.062.687c0 1.552.839 2.812 1.875 2.812" id="path3264"/>
<path d="M22.643 45.164c-4.653 0-8.438 3.785-8.438 8.438a.937.937 0 1 0 1.876 0 6.57 6.57 0 0 1 6.562-6.562 6.57 6.57 0 0 1 6.562 6.562.937.937 0 1 0 1.876 0c0-4.653-3.785-8.438-8.438-8.438" id="path3266"/>
</g>
</svg>
</div>
</body>