-
Notifications
You must be signed in to change notification settings - Fork 16
/
Copy pathindex.html
164 lines (131 loc) · 8.79 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
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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS spark-scroll</title>
<link href='http://fonts.googleapis.com/css?family=Expletus+Sans:700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="index.css"/>
</head>
<body ng-controller="appCtrl as app" ng-cloak>
<div class="hero" spark-id="hero">
<a href="https://github.com/gilbox/spark-scroll"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/e7bbb0521b397edbd5fe43e7f760759336b5e05f/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_green_007200.png"></a>
<a href="https://github.com/gilbox/spark-scroll"><h1 spark-scroll-animate="{
topTop: { opacity: 1, transform: 'translate3d(0px,0px,0px)' },
'topTop+200': { opacity: 0, transform: 'translate3d(0px,250px,0px)' }
}" spark-trigger="hero">
<svg width="296px" height="228px" viewBox="0 0 296 228" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path scope-svg-reveal spark-trigger="hero"
spark-scroll-callback="svgReveal.update"
spark-scroll="{topTop:0, 'topTop+150':0}"
d="M43.7774442,71.4898495 C68.1223861,13.9815032 2.19454397,48.0407223 21.6782286,62.6489207 C35.6643945,73.1352682 58.9096882,70.7747789 65.8766598,90.2775999 C81.3266094,133.527037 58.7305466,191.386016 8.96667524,191.386016 C-21.7867278,124.419226 58.5165505,95.0604409 105.657733,71.4898495 C111.587019,68.5252065 106.843786,84.8551006 105.657733,91.3772797 C99.6123965,124.620967 91.5214411,157.47733 85.7703029,190.833069 C84.8685764,196.062948 81.6274642,214.829299 80.7937857,222.32616 C80.6715598,223.425278 80.7937857,226.749731 80.7937857,225.643838 C80.7937857,178.19023 80.0535912,132.979764 92.3994463,86.6741293 C93.8113405,81.3785334 108.30594,39.7685738 124.99843,54.0751457 C156.752595,81.2905735 92.5724441,93.4702936 121.127805,96.0680044 C128.282422,96.7188674 135.65546,97.5726529 142.680287,96.0680044 C148.736462,94.7708318 187.108665,71.4402165 175.273058,59.6046093 C159.768414,44.0999652 147.084798,89.2989658 152.06795,90.5447538 C167.304679,94.3539362 163.498851,72.3099498 171.408646,72.3099498 C175.432165,72.3099498 170.909757,82.6418308 174.726325,83.9156104 C188.108938,88.3820577 200.672172,72.3568753 206.772362,66.2337527 C207.900248,65.1016258 206.423589,91.2727357 216.160024,86.1211829 C225.148096,81.3655893 232.107661,66.8252089 236.053667,57.9457702 C238.752882,51.8719041 253.48624,1.58873203 246.553435,1.58873203 C241.137697,1.58873203 228.944808,94.9098646 223.342114,100.491575 C218.092273,105.721754 247.690967,38.5929831 260.364668,41.3698053 C278.111625,45.2581835 231.741761,65.8490563 230.530416,69.4830892 C229.69667,71.984328 235.745427,70.3606023 238.265453,71.1357154 C260.054171,77.8375207 284.345377,96.4449716 294.622491,116.999199" id="Path-13" stroke="#382513" stroke-width="3" sketch:type="MSShapeGroup"></path>
</g>
</svg>
</h1></a>
<div class="down-arrow" spark-scroll-animate="{
topTop: { opacity: 1, transform: 'translate3d(0px,0px,0px)' },
'topTop+200': { opacity: 0, transform: 'translate3d(0px,-150px,0px)' }
}" spark-trigger="hero">v</div>
</div>
<!-- Note: all spark-scroll configuration objects are embedded in the markup of this page,
however they could just as easily be instantiated in the controller to keep the markup nice and clean -->
<!-- fade -->
<h2 spark-scroll-animate="{
topBottom: { opacity: 0 },
centerCenter: { opacity: 1 } }
">fade</h2>
<!-- move -->
<h2 spark-scroll-animate="{
topBottom: { marginLeft: '-500px', opacity: 0 },
centerCenter: { marginLeft: '0px', opacity: 1, ease: 'bouncePast' }
}">move</h2>
<!-- spin -->
<div spark-id="rotate-proxy"></div>
<h2 spark-trigger="rotate-proxy" spark-scroll-animate="{
topBottom: { rotate: '0deg' } ,
topCenter: { rotate: '360deg' }
}">spin</h2>
<!-- scale -->
<div spark-id="scale-proxy"></div>
<h2 spark-trigger="scale-proxy" spark-scroll-animate="{
'topCenter-201': { scale: 0.01, opacity: 0},
'topCenter-200': { scale: 0.01, opacity: 1 },
'topCenter+70': { scale: 1, ease: 'bouncePast' }
}">scale</h2>
<!-- pin, reveal, slide, color, unpin -->
<div class="pin-cont" spark-id="pin-cont">
<section class="pin" spark-scroll="{
topTop: { 'downAddClass,upRemoveClass': 'pin-pin' },
bottomBottom: { 'downAddClass,upRemoveClass': 'pin-unpin' }
}" spark-trigger="pin-cont">
<h3 class="pin-txt" spark-scroll-animate="{
'topTop': { top: '0%', marginTop: '0px' },
'topTop+50 ': { top: '50%', marginTop: '-60px' }
}" spark-trigger="pin-cont">pin</h3>
<div spark-scroll-animate="{
'topTop+100': { width: '0%', backgroundColor: '#5c832f' },
'topTop+250': { width: ['100%','easeOutQuart'], backgroundColor: '#382513' }
}" spark-trigger="pin-cont" class="reveal">
<h3 class="reveal-txt">reveal</h3>
</div>
<!-- with array notation we can apply bounce easing to just one property in a keyframe -->
<div spark-scroll-animate="{
'topTop+250': { bottom: '100%', backgroundColor: '#5c832f', 'upAddClass,downRemoveClass': 'hide' },
'topTop+400': { bottom: ['0%','bounce'], backgroundColor: '#284907' },
'topTop+450': { backgroundColor: '#00a' },
'topTop+500': { backgroundColor: '#a00' },
'topTop+550': { backgroundColor: '#5c832f' }
}" spark-trigger="pin-cont" class="slide hide">
<!-- when we hit the appropriate scroll position, use elm.text(..) to change the
text to 'slide' or 'color' depending on the scroll direction -->
<h3 spark-scroll="{
'topTop+400': { onDown: elm.text('color'), onUp: elm.text('slide') }
}" spark-trigger="pin-cont" class="slide-txt" scope-elm>slide</h3>
<h3 spark-scroll-animate="{
'topTop+600': { top: '100%', 'upAddClass,downRemoveClass': 'hide' },
'bottomBottom': { top: '50%' }
}" spark-trigger="pin-cont" class="unpin-txt hide">unpin</h3>
</div>
</section>
</div>
<div class="spacer50"></div>
<!-- parallax -->
<a href="https://www.flickr.com/photos/rafagarcia_/15262287738/in/pool-83823859@N00/">
<div class="parallax-cont" spark-id="parallax">
<div class="parallax-shadow"></div>
<div spark-scroll-animate="{
topBottom: { transform: 'translate3d(0px,0px,0px)' },
bottomTop: { transform: 'translate3d(0px,-80px,0px)' }
}" spark-trigger="parallax"
class="parallax-img"></div>
<h3 class="parallax-txt fade2" spark-scroll-animate="{
topBottom: { transform: 'scale(0.8) translate3d(0px,120px,0px)' },
bottomTop: { transform: 'scale(0.8) translate3d(0px,-120px,0px)' }
}" spark-trigger="parallax">parallax</h3>
<h3 class="parallax-txt fade1" spark-scroll-animate="{
topBottom: { transform: 'scale(0.9) translate3d(0px,160px,0px)' },
bottomTop: { transform: 'scale(0.9) translate3d(0px,-160px,0px)' }
}" spark-trigger="parallax">parallax</h3>
<h3 class="parallax-txt" spark-scroll-animate="{
topBottom: { transform: 'translate3d(0px,200px,0px)' },
bottomTop: { transform: 'translate3d(0px,-200px,0px)' }
}" spark-trigger="parallax">parallax</h3>
</div>
</a>
<div class="spacer50"></div>
<a href="https://github.com/gilbox/spark-scroll">
<img class="center" src="GitHub-Mark-64px.png" alt=""/>
</a>
<div class="spacer10"></div>
<p class="center">This demo was inspired by <a href="http://janpaepke.github.io/ScrollMagic/">ScrollMagic</a></p>
<div class="spacer10"></div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="vendor/lodash.js"></script>
<script src="vendor/shifty.js"></script>
<script src="vendor/rekapi.js"></script>
<script src="vendor/AnimationFrame.js"></script>
<script src="../src/spark-scroll.js"></script>
<script src="index.js"></script>
</body>
</html>