forked from merri-ment/lazy-line-painter
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·118 lines (95 loc) · 3.2 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
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lazy Line Painter</title>
<meta name="description" content="A Jquery plugin for SVG path animation">
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<style>
body {
background:#fffafa;
cursor: pointer;
}
#demo {
width:349px;
height:277px;
position:absolute;
left:50%;
margin:80px 0 0 -175px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery-1.9.1.min.js"><\/script>')</script>
<script src="jquery.lazylinepainter-1.5.1.js"></script>
<script type="text/javascript">
(function( $ ){
/*
* Lazy Line Painter
* SVG Stroke animation.
*
* https://github.com/camoconnell/lazy-line-painter
*
* Copyright 2014
* Cam O'Connell - http://www.camoconnell.com http://www.behance.net/camoconnell
* Released under the MIT license
*
*/
// goto http://lazylinepainter.info to convert your svg into a svgData object.
var svgData = {
"demo" :
{
"strokepath" :
[
{ "path": "M7.603,5.5 c0,0,10.298,24.07,33.517,24.07c23.221,0,33.519-24.07,33.519-24.07s9.142,24.07,33.513,24.07c24.372,0,33.515-24.07,33.515-24.07 s10.858,24.07,33.518,24.07S208.703,5.5,208.703,5.5s9.717,24.07,33.521,24.07c23.801,0,33.518-24.07,33.518-24.07 s13.828,24.07,33.524,24.07c19.698,0,33.524-24.07,33.524-24.07",
"duration": 1500,
"strokeColor": '#c07775',
"strokeWidth": 8
},
{ "path": "M120,139.129 c0,0-8.708-34.233-42.483-34.236c-28.724-0.001-42.493,34.23-42.493,34.23",
"duration":300
},
{ "path": "M313.5,137.138 c0,0-12.209-32.137-39.746-32.138C246.216,104.999,234,137.132,234,137.132",
"duration":300
},
{ "path": "M80.246,193.604 c0,0,21.399,74.387,93.074,74.387c76.026,0,93.095-74.387,93.095-74.387",
"duration":500
}
],
"dimensions" : { "width": 349, "height":277 }
}
}
$(document).ready(function(){
// Setup your Lazy Line element.
// see README file for more settings
$('#demo').lazylinepainter({
'svgData' : svgData,
'strokeWidth':7,
'strokeColor':'#dc908e',
'onComplete' : function(){
console.log('>> onComplete');
},
'onStart' : function(){
console.log('>> onStart');
}
}
)
// Paint your Lazy Line, that easy!
var state = 'paint';
$('#demo').lazylinepainter(state);
$(window).on('click', function(){
state = (state === 'erase') ? 'paint':'erase' ;
$('#demo').lazylinepainter(state);
console.log('>> ' + state);
});
})
})( jQuery );
</script>
</head>
<body>
<div id='demo'></div>
</body>
</html>