Seeking assistance in developing full-screen slides similar to those found on the following website... The browser scrollbar should be hidden, and the slides should automatically transition when scrolling up/down or using the up/down arrow keys, with the active dot changing accordingly.
$("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%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
<a href="#home"></a>
<a href="#services"></a>
<a href="#team"></a>
<a href="#work"></a>
<a href="#process"></a>
<a href="#faq"></a>
<a href="#contact"></a>
</nav>
<div id="home" class="box">
<div class="inner">
<h1>Home</h1>
</div>
</div>
<div id="services" class="box">
<div class="inner">
<h1>Services</h1>
</div>
</div>
<div id="team" class="box">
<div class="inner">
<h1>Team</h1>
</div>
</div>
<div id="work" class="box">
<div class="inner">
<h1>Recent Work</h1>
</div>
</div>
<div id="process" class="box">
<div class="inner">
<h1>Process</h1>
</div>
</div>
<div id="faq" class="box">
<div class="inner">
<h1>FAQ</h1>
</div>
</div>
<div id="contact" class="box">
<div class="inner">
<h1>Contact</h1>
</div>
</div>