-
Notifications
You must be signed in to change notification settings - Fork 237
/
index.html
444 lines (421 loc) · 25.3 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE HTML>
<!--[if IE 6]>
<html id="ie6" lang="en-US" class="ie ie6 lt-ie9">
<![endif]-->
<!--[if IE 7]>
<html id="ie7" lang="en-US" class="ie ie7 lt-ie9">
<![endif]-->
<!--[if IE 8]>
<html id="ie8" lang="en-US" class="ie ie8 lt-ie9">
<![endif]-->
<!--[if gte IE 9]>
<html lang="en-US" class="ie ie9">
<![endif]-->
<!--[if !(IE)]><!-->
<html lang="en-US" class="">
<!--<![endif]-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0 minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="author" content="marcolago">
<meta property="og:title" content="Flowtime.js A HTML Presentation Framework">
<meta property="og:type" content="website">
<meta property="og:url" content="https://marcolago.github.io/flowtime.js/">
<meta property="og:image" content="http://marcolago.github.io/flowtime.js/assets/img/share-image.jpg">
<meta property="og:site_name" content="Flowtime.js">
<meta property="fb:admins" content="1293500397">
<meta name="twitter:card" content="summary">
<meta name="twitter:url" content="https://marcolago.github.io/flowtime.js/">
<meta name="twitter:title" content="Flowtime.js - A HTML Presentation Framework">
<meta name="twitter:description" content="Flowtime.js is an open source framework for easily build HTML presentations or websites. It’s built with web standards in mind and on top of a solid full page grid layout powered by CSS3 hardware accelerated transition and comes with a complete set of Javascript API for deep customization.">
<meta name="twitter:image" content="http://marcolago.github.io/flowtime.js/assets/img/share-image.jpg">
<meta name="twitter:creator" content="@marcolago">
<meta name="description" content="Flowtime.js is an open source framework for easily build HTML presentations or websites. It’s built with web standards in mind and on top of a solid full page grid layout powered by CSS3 hardware accelerated transition and comes with a complete set of Javascript API for deep customization.">
<title>Flowtime.js</title>
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="css/flowtime.css">
<link rel="stylesheet" href="css/themes/default.css">
<link rel="stylesheet" href="assets/css/prism.css">
<link rel="apple-touch-icon-precomposed" href="img/touch-icon-iphone.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch-icon-ipad.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch-icon-iphone-retina.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch-icon-ipad-retina.png">
<link rel="apple-touch-startup-image" href="img/startup-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)">
<link rel="apple-touch-startup-image" href="img/startup-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)">
</head>
<body class="">
<div class="flowtime">
<div class="ft-section" data-id="section-1">
<div id="/section-1/page-1" class="ft-page" data-id="page-1" data-title="A Presentation Framework by @marcolago">
<div class="stack-center">
<div class="stacked-center">
<a href="#/section-1/page-2"><img src="assets/img/logo-white-shadow.png"></a>
<p class="page-title">A Presentation Framework by <a href="https://twitter.com/marcolago" target="_blank">@marcolago</a></p>
<p>Press <strong>Down Key</strong> to continue<br>
Or <strong>Swipe Up</strong> if you prefer.</p>
</div>
</div>
</div>
<div id="/section-1/page-2" class="ft-page" data-id="page-2">
<h1>What is it?</h1>
<p><strong>Flowtime.js</strong> is a framework for easily building HTML presentations or websites.</p>
<p>It’s built with web standards in mind and on top of a solid full page grid layout.</p>
<p>The animations are managed with native and accelerated CSS3 transitions.<br>
Javascript takes care of the navigation behaviour and adds advanced functionalities and configuration options.</p>
<p>Press <strong>Down Key</strong> or <strong>Swipe Up</strong> to continue.</p>
</div>
<div id="/section-1/page-3" class="ft-page" data-id="page-3">
<h1>Compatibility and Support</h1>
<p><strong>Flowtime.js</strong> is fully compatible with real moderns browsers:</p>
<ul>
<li>Firefox</li>
<li>Chrome</li>
<li>Safari</li>
<li>Opera</li>
<li>Internet Explorer 10</li>
</ul>
<p>Internet Explorer 9 and some old versions of other browsers lack the transitions and some modern Javascript features but the main navigation and functionalities will work.</p>
<p>In older browsers degrades to a bi-directional scrolling navigation with anchor links.</p>
</div>
<div id="/section-1/page-4" class="ft-page" data-id="page-4">
<h1>Touch Devices Support</h1>
<p>On touch devices you can navigate through slides swiping in all directions.</p>
<p>By now Flowtime.js was tested and works on Safari Mobile and Chrome Mobile on iOS devices but the support will be wider in the near future.</p>
</div>
</div>
<div class="ft-section" data-id="section-2">
<div id="/section-2/page-1" class="ft-page" data-id="page-1">
<h1>Mastering the Navigation</h1>
<p>You can navigate in many ways. The most common way is using the keyboard.</p>
<h3>Navigation Keys and default behaviours:</h3>
<ul>
<li><strong>Down Key</strong> goes to the next page or shows up the next fragment (we’ll see this later).</li>
<li><strong>Up Key</strong> goes to the previous page or hides the fragment.</li>
<li><strong>Right Key</strong> goes to the adjacent page in the next section <span class="small">(if available, it’s like a grid, otherwise it goes to the last page in the next section).</span></li>
<li><strong>Left Key</strong> goes to the adjacent page in the previous section.</li>
</ul>
</div>
<div id="/section-2/page-2" class="ft-page" data-id="page-2">
<h1>Alternate Navigation Control</h1>
<p>Pressing the <strong>Shift Key</strong> you can alternate the the default navigation keys behaviour; let’s see how:</p>
<ul>
<li><strong>Down Key</strong> goes to the next page skipping all the fragments.</li>
<li><strong>Up Key</strong> goes to the previous page skipping all the fragments.</li>
<li><strong>Right Key</strong> goes to the first page in the next section.</li>
<li><strong>Left Key</strong> goes to the first page in the previous section.</li>
</ul>
</div>
<div id="/section-2/page-3" class="ft-page" data-id="page-3">
<h1>Some Other Keys</h1>
<p>Because: the more, the better.</p>
<ul>
<li><strong>Page Up Key</strong> goes to the first page of the current section.</li>
<li><strong>Page Down Key</strong> goes to the last page of the current section.</li>
<li><strong>Home Key</strong> goes to the first page of the first section.</li>
<li><strong>End Key</strong> goes to the last page of the last section.</li>
</ul>
</div>
<div id="/section-2/page-4" class="ft-page" data-id="page-4">
<h1>Overview Mode.</h1>
<p>You can look at the entire presentation by pressing <strong>ESC Key</strong>.<br>
When in Overview Mode you can go back to the Page Mode by pressing again the ESC Key.</p>
<p>Try it out!</p>
<p><strong class="attention">WARNING! Experimental Feature.</strong> If you experience problems in webkit browser you can use the alternate Overview Mode; see the <a href="https://github.com/marcolago/flowtime.js" target="_blank">documentation</a> for more info.</p>
</div>
<div id="/section-2/page-5" class="ft-page" data-id="page-5">
<h1>Navigating the Overview</h1>
<p>In Overview Mode the arrow keys works in the same way as in Page Mode, highlighting the future destination. To navigate to the highlighted page just press <strong>Return or Enter Key</strong> or click on the desired page.</p>
</div>
<div id="/section-2/page-6" class="ft-page" data-id="page-6">
<h1>Navigate via Links or Javascript API</h1>
<p>You can link every page by simply building the <code>href</code> value using this schema:</p>
<pre><code class="language-markup">
<a href="#/[section data-id attribute]/[page data-id attribute]">
</code></pre>
<p>Where <code>data-id</code> attribute is an optional attribute you can add to every section or page.<br>
I.e.: if you want to go to back to the first page <a href="#/section-1/page-1">click here</a> <span class="small">(press <strong>backspace</strong> to come back to this page)</span>.</p>
<p>You can also trigger every navigation behaviour using the <strong>Flowtime.js Javascript API</strong>.<br>Take a look at the <a href="https://github.com/marcolago/flowtime.js" target="_blank">documentation</a> if you want to learn more.</p>
</div>
<div id="/section-2/page-7" class="ft-page" data-id="page-7">
<h1>Navigate With History</h1>
<p>Flowtime.js offers a full support for the HTML5 History API where available or gracefully degrades on the hashchange event.</p>
<p>This means that you can navigate using the browser’s back and forward buttons and deeplink a page for sharing purposes.</p>
</div>
<div id="/section-2/page-8" class="ft-page" data-id="page-8">
<h1>Progress Indicator</h1>
<p>You can enable a default progress indicator useful not only to know what’s the current page you are looking, but also as a navigation tool.</p>
<p><strong>Look at the bottom right corner</strong> and you can see a miniature of the presentation structure.</p>
<p>Clicking on a page thumb will navigate to that page.</p>
</div>
</div>
<div class="ft-section" data-id="section-3">
<div id="/section-3/page-1" class="ft-page" data-id="page-1">
<h1>Fragments Support</h1>
<p>The built in fragments navigation allows to advance step by step inside a page.<br>
Press down to try.</p>
<p class="ft-fragment">You can discover single elements <span class="ft-fragment">or even a single part of an element, <span class="ft-fragment">one <span class="ft-fragment">at <span class="ft-fragment">a <span class="ft-fragment">time.</span></span></span></span></span></p>
<p class="ft-fragment">Fragments navigation is deeply customizable with some configuration options<br>
You can learn how in the <a href="https://github.com/marcolago/flowtime.js" target="_blank">documentation</a>.</p>
</div>
<div id="/section-3/page-2" class="ft-page" data-id="page-2">
<h1>Fragments Unleashed</h1>
<p>Fragments can be more than just delayed piece of page.<p>
<p>Thanks to some special classes you can add a couple of useful custom behaviours.</p>
<ul>
<li class="ft-fragment step">The <code>.step</code> fragment will partially fades out;</li>
<li class="ft-fragment shy">The <code>.shy</code> fragment will completely hides itself;</li>
<li class="ft-fragment">You can use this two special fragment types to easily create special effects.</li>
</ul>
<p><span class="ft-fragment shy">This</span> <span class="ft-fragment shy">is</span> <span class="ft-fragment shy">a</span> <span class="ft-fragment shy"><code>.shy</code></span> <span class="ft-fragment shy">example!</span></p>
<p><span class="ft-fragment step">And</span> <span class="ft-fragment step">this</span> <span class="ft-fragment step">is</span> <span class="ft-fragment step">a</span> <span class="ft-fragment step"><code>.step</code></span> <span class="ft-fragment step">one!</span></p>
</div>
</div>
<div class="ft-section" data-id="section-4">
<div id="/section-4/page-1" class="ft-page" data-id="page-1">
<h1>Default HTML Structures</h1>
<p>Flowtime.js comes with a default theme that styles the most common HTML structures, like:</p>
<h1>1<sup>st</sup> Level Heading</h1>
<h2>2<sup>nd</sup> Level Heading</h2>
<h3>3<sup>rd</sup> Level Heading</h3>
<h4>4<sup>th</sup>, 5<sup>th</sup> and 6<sup>th</sup> Level Heading</h4>
</div>
<div id="/section-4/page-2" class="ft-page" data-id="page-2">
<h1>Unordered Lists</h1>
<ul>
<li>An item.</li>
<li>Another item.</li>
<li>Just another item.</li>
<li>Ok, we get it!</li>
</ul>
</div>
<div id="/section-4/page-3" class="ft-page" data-id="page-3">
<h1>Ordered Lists</h1>
<ol>
<li>One.</li>
<li>Two.</li>
<li>Three.</li>
<li>Four.</li>
</ol>
</div>
<div id="/section-4/page-4" class="ft-page" data-id="page-4">
<h1>Definition Lists</h1>
<dl>
<dt>One:</dt>
<dd>a single unit of everything.</dd>
<dt>Two:</dt>
<dd>the only even prime number.</dd>
<dt>Three:</dt>
<dd>without the “h” is a plant.</dd>
<dt>Four:</dt>
<dd>“Quattro” in italian.</dd>
</dl>
</div>
<div id="/section-4/page-5" class="ft-page" data-id="page-5">
<h1>Quotes and Citations</h1>
<p>My favourite quotation: <q>The bad craftsman blames his tools</q>.</p>
<blockquote>
Sotto un cespo di rose scarlatte dai al rospo the caldo col latte.<br>
Sotto un cespo di rose paonazze tocca al rospo lavare le tazze.
</blockquote>
<p><cite><a href="http://html5doctor.com/blockquote-q-cite/" target="_blank">Quoting and citing with <blockquote>, <q>, <cite>, and the cite attribute</a> </cite> on HTML5 Doctor.</p>
</div>
<div id="/section-4/page-6" class="ft-page" data-id="page-6">
<h1>Theme and Styling</h1>
<p>If you don’t like the default theme or you want to build your own (or both things),<br>
or if you want to build a website on top of Flowtime.js,<br>
you can write your own theme and replace the default one.</p>
<p>Theme and core css are in separate files so you can’t break the layout (unless you override some classes).</p>
<h2>Fluid Layout</h2>
<p>Everything can be fluid, just use <strong>em</strong>, <strong>rem</strong> and <strong>%</strong> units if you want to make an element resizable.</p>
</div>
</div>
<div class="ft-section" data-id="section-5">
<div id="/section-5/page-1" class="ft-page" data-id="page-1">
<h1>Image Management</h1>
<p>Images are fluid like all the other content.</p>
<p>You can insert images in the flow or stack images ones on top the others with a minimal markup overhead to create some fancy fragments tricks.</p>
<p>Go to the next pages to see fluid images in action and how stacked images can be managed, both in the flow or centered in the slide.<br>
Look at the source code to learn how to write the markup.</p>
</div>
<div id="/section-5/page-2" class="ft-page" data-id="page-2" data-title="Fluid Images">
<a href="http://www.genereavventura.com" target="_blank"><img src="assets/img/genereavventura.jpg"></a>
</div>
<div id="/section-5/page-3" class="ft-page" data-id="page-3">
<h1>Stacked Images</h1>
<div class="stack">
<div class="stacked"><img src="assets/img/mi1-stacked-0.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-1.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-2.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-3.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-4.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-5.png"></div>
<div class="ft-fragment stacked"><img src="assets/img/mi1-stacked-6.png"></div>
</div>
</div>
<div id="/section-5/page-4" class="ft-page" data-id="page-4">
<div class="stack-center">
<h1 class="stacked-center">Centered Stacked Images</h1>
</div>
<div class="ft-fragment stack-center"><img class="stacked-center" src="assets/img/mi2-concept-art.jpg"></div>
<div class="ft-fragment stack-center"><img class="stacked-center" src="assets/img/mi2-original.jpg"></div>
<div class="ft-fragment stack-center"><img class="stacked-center" src="assets/img/mi2-special-edition.jpg"></div>
</div>
<div id="/section-5/page-5" class="ft-page" data-id="page-5">
<div class="stack-center">
<div class="stacked-center">
<h1>About the Centered Stack</h1>
<p class="ft-fragment">You can center anything, not only images!</p>
<p class="ft-fragment">Just like this content.<br>Useful for splash pages and titles.</p>
<p class="ft-fragment">And you are not limited to stacks, you can center what you want.</p>
</div>
</div>
</div>
</div>
<div class="ft-section" data-id="section-6">
<div id="/section-6/page-1" class="ft-page" data-id="page-1">
<h1>Native Parallax Support</h1>
<p>By popular demand Flowtime.js includes native parallax support*.</p>
<p>Simply add a <code>parallax</code> class to anything you want to have parallax enabled and configure the amount of distance for all elements or for a single element using <code>data-parallax</code> attribute.</p>
<p>For an example go to the <a href="#/section-6/page-2">next page</a>; for more info read the <a href="https://github.com/marcolago/flowtime.js" target="_blank">documentation</a>.</p>
<p><span class="small">* By the way: I’m not a parallax fan; but ehi… this is the "web 3.0".</span></p>
</div>
<div id="/section-6/page-2" class="ft-page parallax-demo" data-id="page-2">
<h1>The Invaders from Audiogalaxy</h1>
<img class="kingmix parallax" src="assets/img/kingmix.png" data-parallax="1500,1500">
<img class="sax parallax" src="assets/img/sax.png" data-parallax="750,750">
<img class="tone parallax" src="assets/img/tone.png" data-parallax="500,500">
</div>
<div id="/section-6/page-3" class="ft-page" data-id="page-3">
<h1>This Page Is Just for Testing the Parallax</h1>
<p>In the previous page, from left to right:</p>
<dl>
<dt>Sax:</dt>
<dd>King Mix’s most trusted servant. After a diploma in the music conservatory in the…</dd>
<dt>King Mix:</dt>
<dd>son of the noble dynasty of the Mix of Censor, he soon shows his…</dd>
<dt>Tone:</dt>
<dd>the most feared space intruder on Mixer. He flunked the musical exam…</dd>
</dl>
<p>More info about this villains on <a href="http://www.genereavventura.com" target="_blank">www.genereavventura.com</a>.
</div>
</div>
<div class="ft-section" data-id="section-7">
<div id="/section-7/page-1" class="ft-page" data-id="page-1">
<h1>Code Snippets Highlight</h1>
<p>Code highlight is a courtesy of <a href="http://prismjs.com/" target="_blank">Lea Verou’s Prism</a>.<br>Because I really didn’t want to re-invent the wheel.<br><span class="small">You can use what you want, it’s not a dependency (but it’s very smart and cool).</span></p>
<pre><code class="language-javascript">function saySomethingSmart()
{
alert("The bad craftsman blames his tools!");
}</code></pre>
<pre><code class="language-css">.is-not-water {
display: inline-block;
}</code></pre>
<pre><code class="language-markup"><h1>The Bad Craftsman Blames His Tools!</h1></code></pre>
</div>
<div id="/section-7/page-2" class="ft-page" data-id="page-2">
<h1>Events and Custom Implementations</h1>
<p>When navigated to a page Flowtime.js fires a custom <code>flowtimenavigation</code> event full of useful properties to customize or build your components or behaviours.</p>
<p>Read the <a href="https://github.com/marcolago/flowtime.js" target="_blank">documentation</a> to learn more about this event and its properties.</p>
</div>
</div>
<div class="ft-section" data-id="section-8">
<div id="/section-8/page-1" class="ft-page" data-id="page-1">
<h1>Some Examples</h1>
<p>You can take a look at some examples to explore some of the possibilities that Flowtime.js offers to customize your experience.</p>
<ul>
<li><a href="http://marcolago.github.io/flowtime.js/examples/cross-direction/" target="_blank">Cross Direction</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/custom-fragment-animations/" target="_blank">Custom Fragment Animations</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/duplicated-id/" target="_blank">Duplicated IDs</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/modal-overlay/" target="_blank">Modal Overlay</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/page-titles-in-navigation/" target="_blank">Page Titles in Navigation</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/scroll-the-section/" target="_blank">Scroll the Current Section Only</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/sub-pages-demo/" target="_blank">Sub Pages Demo</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/video/" target="_blank">Video Embedding and Controls</a></li>
</ul>
<p>Continues …</p>
</div>
<div id="/section-8/page-2" class="ft-page" data-id="page-2">
<h1>More Examples</h1>
<ul>
<li><a href="http://marcolago.github.io/flowtime.js/examples/section-navigation-options/default/" target="_blank">Default Behavior;</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/section-navigation-options/grid-navigation-false/" target="_blank">gridNavigation(false);</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/section-navigation-options/nearest-page-to-top/" target="_blank">nearestPageToTop(true);</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/section-navigation-options/remember-sections-last-page/" target="_blank">rememberSectionsLastPage(true);</a></li>
<li><a href="http://marcolago.github.io/flowtime.js/examples/section-navigation-options/remember-sections-status/" target="_blank">rememberSectionsStatus(true);</a></li>
</ul>
<p>If you need a specific example or if you have a question about a feature feel free to ask or <a href="https://github.com/marcolago/flowtime.js/issues" target="_blank">open an issue</a>.</p>
</div>
</div>
<div class="ft-section" data-id="section-9">
<div id="/section-9/page-1" class="ft-page" data-id="page-1">
<h1>Use It! It’s Free</h1>
<p>This project is open source, feel free to contribute to the development on <a href="https://github.com/marcolago/flowtime.js" target="_blank">Github</a>.</p>
<p>Feedbacks, suggestions and bug reports are welcomes.</p>
<p>Use it as you wish and build great things.<br>And when you have done so let me know the URL, I will appreciate it.</p>
</div>
<div id="/section-9/page-2" class="ft-page" data-id="page-2">
<h1>Thank You</h1>
<p>Designed and coded by Marco Lago<br>
Interaction/Experience/Game/Designer/Developer</p>
<p>You can find me on Twitter as <a href="https://twitter.com/marcolago" target="_blank">@marcolago</a></p>
<p>If you like this work spread the word, you know how ;)</p>
<h2>Have Fun</h2>
</div>
</div>
</div>
<a href="https://github.com/marcolago/flowtime.js"><img style="position: fixed; top: 0; right: 0; border: 0; z-index: 1000;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png" alt="Fork me on GitHub"></a>
<script src="js/brav1toolbox.js"></script>
<script src="js/flowtime.js"></script>
<!-- <script src="js/flowtime.min.js"></script> -->
<script src="assets/js/prism.js"></script>
<script type="text/javascript">
var cacheTitle = document.title.replace("Flowtime.js | ", "");
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-1228618-10']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Flowtime', 'Landing', document.title]);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
// Configuration API test
Flowtime.showProgress(true);
// Flowtime.fragmentsOnSide(true);
// Flowtime.fragmentsOnBack(true);
// Flowtime.fragmentsAlwaysOnOnceRevealed(true);
// Flowtime.useHistory(false);
// Flowtime.slideInPx(true);
// Flowtime.sectionsSlideToTop(true);
// Flowtime.backFromPageToTop(true);
// Flowtime.gridNavigation(false);
// Flowtime.useOverviewVariant(true);
Flowtime.parallaxInPx(true);
//
// event management
// Flowtime.addEventListener("flowtimenavigation", onNavigation, false);
Flowtime.onNavigation(onNavigation);
function onNavigation(e)
{
_gaq.push(['_trackEvent', 'Flowtime', 'Navigation', cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", "")]);
// console.log(cacheTitle + ' > ' + document.title.replace("Flowtime.js | ", ""));
cacheTitle = document.title.replace("Flowtime.js | ", "");
//console.log('section', e.section, 'sectionIndex', e.sectionIndex);
//console.log('page', e.page, 'pageIndex', e.pageIndex);
//console.log('pastSectionIndex', e.pastSectionIndex, 'pastPageIndex', e.pastPageIndex);
//console.log('prevSection', e.prevSection);
//console.log('nextSection', e.nextSection);
//console.log('prevPage', e.prevPage);
//console.log('nextPage', e.nextPage);
//console.log('fragment', e.fragment, + 'fragmentIndex', e.fragmentIndex);
//console.log("isOverview", e.isOverview);
//console.log('progress:', e.progress, 'total:', e.total);
//var value = Math.round(e.progress * 100 / e.total);
//console.log('Completion: ' + value + '%');
}
// starts the application with configuration options
Flowtime.start();
</script>
</body>
</html>