/
skim_button.html
80 lines (80 loc) · 2.19 KB
/
skim_button.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
<html>
<head>
<title>Skim it!</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://plugins.compzets.com/animatescroll/js/animatescroll.js"></script>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.chunk {
}
.two, .three, .four {
/*display: none;*/
}
.one {
background-color: red;
z-index: 100;
}
.two {
background-color: blue;
z-index: 90;
}
.three {
background-color: green;
z-index: 80;
}
.four {
background-color: yellow;
z-index: 70;
}
#skim {
color: #fff;
margin-top: 15px;
padding: 5px 10px 5px 10px;
background-color: green;
}
</style>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#"><img class ="favicon" src="http://agreetodisagree.bangordailynews.com/wp-content/themes/bdnblog2013/images/BDN_Square.jpg" height="100%"></a>
<p class ="nav-header">Six Miles Out</p>
</div>
</div>
<ul class="nav pull-right">
<li id="skim">SKIM</li>
</ul>
</div>
<div class="chunk one"></div>
<div class="chunk two"></div>
<div class="chunk three"></div>
<div class="chunk four"></div>
<script type="text/javascript">
var width = $( window ).width();
var height = $( window ).height();
$('.chunk').css("width", width + 'px');
$('.chunk').css("height", height + 'px');
var chunks = ["one", "two", "three", "four"];
var count = 0;
$("#skim").click(function(){
if (count < chunks.length) {
$('.' + chunks[count]).animatescroll();
} else {
$('.' + chunks[0]).animatescroll();
count = 0;
}
count ++;
})
</script>
</body>
</html>