This repository was archived by the owner on Nov 27, 2018. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
104 lines (88 loc) · 5.84 KB
/
Copy pathindex.html
File metadata and controls
104 lines (88 loc) · 5.84 KB
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
<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 lte9 lte8 lte7 lte6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 lte9 lte8 lte7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 lte9 lte8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9 lte9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>Fullpager plugin</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="example/screen.css" rel="stylesheet" />
<script src="js/jquery-1.11.0.js"></script>
<!-- Plugin files and setup below -->
<link href="fullpager/imagefill.css" rel="stylesheet" />
<link href="fullpager/fullpager.css" rel="stylesheet" />
<!-- For imagefill plugin -->
<script src="js/imagesloaded.js"></script>
<script src="js/jquery.imagefill.js"></script>
<!-- For fullpager plugin -->
<script src="js/isInViewport.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.ba-throttle-debounce.js"></script>
<script src="fullpager/jquery.fullpager.js"></script>
<!--
<script src="fullpager/jquery.fullpager-combined.js"></script>
-->
<script>
$(function(){
$('body').fullpager({
onPageChange: function() {
// console.log('changed to ' + this.current);
}
});
});
</script>
</head>
<body>
<div class="fp-header">
<!--
Including this header element is optional, but usefull if you also want to
include other elements (e.g. logo), otherwise it will be generated automatically.
-->
</div>
<div id="introduction" class="fp-page" data-title="Introduction" data-background="#3498db">
<section class="fp-content">
<h1>Fullpager jQuery plugin</h1>
<p>Fullpager is a plugin to create full-screen paged content, as seen on <a href="http://letterboxd.com/2013/">the Letterboxd Year In Review</a>.</p>
<p><a href="http://github.com/sneaknz/fullpager">Download the latest copy</a> from Github</p>
</section>
</div>
<div id="two" class="fp-page" data-title="Page Two" data-image="example/forrest-1600x800.jpg">
<section class="fp-content">
<h1>Page Two</h1>
<p>With a full bleed image background</p>
</section>
</div>
<div id="not-in-nav" class="fp-page" data-background="#c0392b">
<section class="fp-content">
<h1>Page not shown in nav</h1>
<p>But with a custom background colour added.</p>
</section>
</div>
<div class="fp-page" data-title="No ID" data-background="#27ae60">
<section class="fp-content">
<h1>This page has no ID</h1>
<p>It will be ignored in relation to the navigation and push state.</p>
</section>
</div>
<div id="three" class="fp-page" data-title="Page Three" data-background="#9b59b6">
<section class="fp-content">
<h1>Page Three</h1>
<p>A page with long content that might go off the bottom of the browser.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
</div>
<div id="four" class="fp-page" data-title="Page Four" data-image="http://farm6.staticflickr.com/5206/5352726192_aa9bd63ebb_b.jpg">
<section class="fp-content">
<h1>Page Four</h1>
<p>Another page with a full bleed image background, just to round things out.</p>
</section>
</div>
</body>
</html>