Pure CSS Vertical Page Slider

Preview:

Description:

A pure CSS / CSS3 solution to create a vertical page slider which allows you to navigate between page sections with a smooth CSS3 scrolling animation.

How to use it:

Create a group of anchor links for your page slider.

<a id="nav0"></a>
<a id="nav1"></a>
<a id="nav2"></a>
<a id="nav3"></a>

Create page sections as follow.

<section id="main">
  <div class="parallax-layer" id="slide01">
    <p>Welcome</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">Slide01</a></li>
        <li><a href="#nav1">Slide02</a></li>
        <li><a href="#nav2">Slide03</a></li>
        <li><a href="#nav3">Slide04</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide02">
    <p>Team</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">Slide01</a></li>
        <li><a href="#nav1">Slide02</a></li>
        <li><a href="#nav2">Slide03</a></li>
        <li><a href="#nav3">Slide04</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide03">
    <p>Projects</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">Slide01</a></li>
        <li><a href="#nav1">Slide02</a></li>
        <li><a href="#nav2">Slide03</a></li>
        <li><a href="#nav3">Slide04</a></li>
      </ul>
    </div>
  </div>
  <div class="parallax-layer" id="slide04">
    <p>Contact</p>
    <div class="navlinks">
      <ul id="mynav">
        <li><a href="#nav0">Slide01</a></li>
        <li><a href="#nav1">Slide02</a></li>
        <li><a href="#nav2">Slide03</a></li>
        <li><a href="#nav3">Slide04</a></li>
      </ul>
    </div>
  </div>
</section>

Add the core stylesheet overrides.css in the head section of the document.

<link rel="stylesheet" href="css/overrides.css">