Deslizador de página vertical de CSS puro

Vista prévia

Descripción

Una solución CSS/CSS3 pura para crear un deslizador de página vertical que le permite navegar entre secciones de página con una animación de desplazamiento CSS3 suave.

Funcionamiento

Cree un grupo de enlaces de anclaje para el control deslizante de la página.

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

Cree secciones de página como sigue.

<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>

Añada la hoja de estilo principal Overrides. CSS en la sección head del documento.

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