public
Last active

  • Download Gist
SideScroller.js
JavaScript
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
(function() {
var divs = $('.page'),
$next = $('.next'),
$prev = $('.prev'),
that = this,
loc, page;
for (var i = divs.length - 1; i >= 0; i--) {
var z = i + 1;
divs[i].style.left = i * 100 + '%';
divs[i].id = 'page-' + (i + 1);
$(divs[i]).addClass('lazy');
}
page = window.location.hash;
if (!page) {
page = '#page-1';
$prev.hide();
}
$(page).removeClass('lazy');
$next.click(function() {
loc = $next.attr('href');
page = window.location.hash;
if (!page) {
page = '#page-1';
}
$(page).next('.page').removeClass('lazy');
if (page) {
var nextPage = function() {
var add = parseInt(page.substr(6, 2)) + 1;
if (add < divs.length) {
$prev.show();
return add;
} else {
$next.hide();
return divs.length;
}
};
$next.attr('href', '');
$next.attr('href', '#page-' + nextPage());
} //end if page
});
$prev.click(function() {
loc = $prev.attr('href');
page = window.location.hash;
$(page).prev('.page').removeClass('lazy');
if (page) {
var prevPage = function() {
var subtract = parseInt(page.substr(6, 2)) - 1;
if (subtract > 1) {
$next.show();
return subtract;
} else {
$prev.hide();
return 1;
}
};
$prev.attr('href', '');
$prev.attr('href', '#page-' + prevPage());
}
});
})();
sidescroll.html
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
body{
overflow-x:hidden;
}
.page {
overflow:hidden;
position:absolute;
top:0;
bottom:0;
width: 100%;
border: 1px solid black;
}
.prev, .next{
position: fixed;
top: 45%;
background: white;
padding: 10px;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}
#page-1{
background: url('http://fc04.deviantart.net/fs71/f/2011/008/5/a/steampunk_by_zy0rg-d36p7u1.png');
}
#page-2{
background: url('http://thepaperwall.com/wallpapers/sci-fi/big/big_4c54571b2d0177b51c3c50c5e60c5e53c96d6537.jpg');
}
#page-3{
background: url('http://thepaperwall.com/wallpapers/video_games/big/big_fafcced1c0c107f6fa3066839f53aed85b783a59.jpg');
}
#page-4{
background:url('http://thepaperwall.com/wallpapers/fantasy/big/big_85b3812da9abc681d504d86859d2160840e6846a.jpg');
}
.lazy{
background:none !important;
}
-->
</style>
 
</head>
 
<body>
<div class="page">
1
</div>
<div class="page">
2
</div>
<div class="page">
3
</div>
<div class="page">
4
</div>
<a href="#page-1" class="prev">prev</a><a href="#page-2" class="next">next</a>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="SideScroller.js" type="text/javascript" charset="utf-8">
</script>
</body>
</html>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.