Skip to content

Instantly share code, notes, and snippets.

@aligator28

aligator28/index.html

Created September 14, 2016 14:55
Show Gist options
  • Save aligator28/6aa87babd9d87ba0c1822456e4731807 to your computer and use it in GitHub Desktop.
Save aligator28/6aa87babd9d87ba0c1822456e4731807 to your computer and use it in GitHub Desktop.
Download ZIP
Движок сайта с перелистыванием страниц во время скроллинга (красиво!)
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Scroll</title>
</head>
<body>
<div class="pages _1page" data-id="1">
<img src="https://unsplash.it/800/600/?random" alt="fashion">
</div>
<div class="pages _2page" data-id="2">
<img src="https://unsplash.it/800/400/?random" alt="fashion">
</div>
<div class="pages _3page" data-id="3">
<img src="https://unsplash.it/600/600/?random" alt="fashion">
</div>
<div class="pages _3page" data-id="4">
<img src="https://unsplash.it/400/600/?random" alt="fashion">
</div>
<div class="pages _3page" data-id="5">
<img src="https://unsplash.it/800/300/?random" alt="fashion">
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>
Raw
js.js
var keyDown = 40;
var keyUp = 38;
document.onkeydown = function(event) {
var currKey = detectKeyCode(event);
if (currKey == keyDown || currKey == keyUp) { // do this script only when pressing up or down buttons
var currPage = detectCurrentPage();
showNextPage(currPage, event);
}
};
function showNextPage(currPage, event) {
var nextPage = 1;
var currKey = detectKeyCode(event);
if (currKey == keyDown) {
nextPage = parseInt(currPage) + 1;
}
if (currKey == keyUp) {
if (currPage == 1) {
nextPage = 1;
}
else {
nextPage = parseInt(currPage) - 1;
}
}
changePagesVisibility(currPage, nextPage);
console.log(nextPage);
}
function changePagesVisibility(currPage, nextPage) {
if ( $('.pages').size() == nextPage - 1 ) { //do not allow to scroll more than last web page (не позволяем переходить на несуществующие страницы, большие чем их есть)
return false; //if we want to stop scrolling pages at all
nextPage = 1; //if we want to start from first page
}
$('body').find('[data-id="' + currPage + '"]').slideUp('slow');
$('body').find('[data-id="' + nextPage + '"]').slideDown('slow');
}
function detectCurrentPage() {
var page = '';
$('.pages').each(function(index, element) {
if ($(this).css('display') == 'block') {
page = $(this).attr('data-id');
}
});
return page;
}
function detectKeyCode(event) {
var keycode;
if(!event) var event = window.event;
if (event.keyCode) keycode = event.keyCode; // IE
else if(event.which) keycode = event.which; // all browsers
return keycode;
}
Raw
style.css
html, body {
height: 100%;
margin: 0;
}
.pages {
height: 100%;
width: 100%;
position: absolute;
display: none;
}
.pages img {
display: block;
margin: 3% auto;
}
div[data-id="1"] {
display: block;
background-color: #AB4848;
}
div[data-id="2"] {
background-color: #53508E;
}
div[data-id="3"] {
background-color: #569350;
}
div[data-id="4"] {
background-color: #509392;
}
div[data-id="5"] {
background-color: #938A50;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment