Librería para One Page Scroll Sites

Si necesitas hacer un sitio web del tipo “One Page Scroll”, que utilizan una navegación similar a un slider, hay una librería que resuelve prácticamente todo el trabajo. Justamente la librería se llama One Page Scroll. Su uso es muy simple.

Agregar la librería de JavaScript One Page Scroll

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/jquery.onepage-scroll.min.js"></script>

Agregar la hoja de estilos css One Page Scroll

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onepage-scroll/1.3.1/onepage-scroll.min.css">

Armar la estructura que espera la librería por defecto, es una estructura base, separada en secciones:

<div id="page">
    <section class="home">
                        <br/><br/><br/><br/>
                        <h1>HOME</h1>
                        <br/><br/><br/><br/>
    </section>
    <section class="contacto">
                        <br/><br/><br/><br/>
                        <h1>CONTACTO</h1>
                        <br/><br/><br/><br/>
    </section>
    <section class="productos">

                        <br/><br/><br/><br/>
                        <h1>PRODUCTOS</h1>
                        <br/><br/><br/><br/>
    </section>            
</div>

El último paso es indicar el contenedor de la secciones

$("#page").onepage_scroll();

Referencias:

Recent Posts

Leave a Comment