Как создать полноэкранные слайды ⇐ Html

[Anonymous]

Может ли кто-нибудь помочь мне создать полноэкранные слайды, точно такие же, как следующий веб-сайт?
Полоса прокрутки браузера скрыта, при прокрутке вверх/вниз или нажатии клавиши вверх/вниз слайды перемещаются на следующий экран, а активная точка изменяется в соответствии со слайдом.
http://vaalentin.github.io/2015/

Код: Выделить всё

$("nav a").click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 1000);
});

Код: Выделить всё

* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
body {
margin: 0px;
overflow: hidden;
}
.box {
display: table;
width: 100vw;
height: 100vh;
}
.box { background-color: rgb(179, 235, 255); }
.box + .box { background-color: rgb(217, 255, 228); }
.box + .box + .box { background-color: rgb(255, 221, 255); }
.box + .box + .box + .box { background-color: rgb(255, 190, 190); }
.box + .box + .box + .box + .box { background-color: rgb(253, 176, 255); }
.box + .box + .box + .box + .box + .box { background-color: rgb(0, 26, 73); color: #fff; }
.box + .box + .box + .box + .box + .box + .box { background-color: rgb(23, 0, 4); }

.inner {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 1vw;
}
nav {
position: fixed;
z-index: 999;
top: 50%;
right: 20px;
}
nav a:link,
nav a:visited {
display: block;
width: 10px;
height: 10px;
margin-bottom: 10px;
cursor: pointer;
background-color: #222;
border-radius: 50%;
}

Код: Выделить всё

[url=#home][/url]
[url=#services][/url]
[url=#team][/url]
[url=#work][/url]
[url=#process][/url]
[url=#faq][/url]
[url=#contact][/url]




Home




Services




Team




Recent Work




Process




FAQ




Contact

Подробнее здесь: https://stackoverflow.com/questions/308 ... een-slides