-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
69 lines (55 loc) · 2.1 KB
/
app.js
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
var $ = require('jquery-browserify'),
__ = require('underscore'),
$d = $(document),
$p, p, a, pageHeight, pathLength, prevOffset;
$d.ready(function(){
a = false;
$p = $('path');
p = $p[0];
pathLength = p.getTotalLength();
pageHeight = document.body.clientHeight - window.innerHeight;
prevOffset = pathLength;
$p.attr('stroke-dashArray', [pathLength, pathLength]);
$p.attr('stroke-dashoffset', pathLength);
$p.attr('stroke', '#000000');
a = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
// set its attributes
a.setAttributeNS(null, 'attributeName', 'stroke-dashoffset');
a.setAttributeNS(null, 'dur', 1);
a.setAttributeNS(null, 'to', pathLength);
a.setAttributeNS(null, 'from', pathLength);
a.setAttributeNS(null, 'fill', 'freeze');
// link the a to the target
p.appendChild(a);
$('#path2').attr('stroke-dashArray', [pathLength/3, pathLength/3*5])
.attr('stroke-dashoffset', pathLength/3);
var b = document.createElementNS(
'http://www.w3.org/2000/svg', 'animate');
// set its attributes
b.setAttributeNS(null, 'attributeName', 'stroke-dashoffset');
b.setAttributeNS(null, 'dur', 4);
b.setAttributeNS(null, 'to', -pathLength/3*5);
b.setAttributeNS(null, 'from', pathLength/3);
b.setAttributeNS(null, 'fill', 'freeze');
$('#path2')[0].appendChild(b);
$(window).scroll( __.throttle(onScroll, 30) );
});
function onScroll(event){
var scrollHeight = $d.scrollTop(),
scrollPercentage = scrollHeight/pageHeight;
offset = pathLength * (1 - scrollPercentage);
console.log(scrollHeight, pageHeight);
a.setAttributeNS(null, 'from', prevOffset);
a.setAttributeNS(null, 'to', offset);
a.setAttributeNS(null, 'dur', 1);
a.beginElement();
prevOffset = offset;
}
/*
* Return outerHTML for the first element in a jQuery object,
* or an empty string if the jQuery object is empty;
*/
jQuery.fn.outerHTML = function() {
return (this[0]) ? this[0].outerHTML : '';
};