Desplazamiento suave de una página con JavaScript puro y multiplataforma

Vista prévia

Descripción

Una implementación pura de JavaScript/CSS de efecto de desplazamiento de una página sin problemas de multiplataforma con 3 dependencias.

Características

• Interactúa con el desplazamiento del ratón, toca deslizar y teclas de flecha.
• Desplazamiento suave entre secciones.
• Navegación lateral.
• Soporta evento de cambio de hashtag.

Funcionamiento

Cargue ambas hojas de estilo full-page-scroll. CSS y JavaScript full-page-scroll. js en su archivo HTML.

<link rel="stylesheet" href="full-page-scroll.css">
<script src="full-page-scroll.js"></script>

Agregue contenido seccionado al sitio web de desplazamiento de una página.

<div id="main" class="scroll-container">

<section class="section1">


<div>



<span>Section 1</span>







</div>

</section>

<section class="section2">


<div>



<span>Section 2</span>



</div>

</section>

<section class="section3">


<div>



<span>Section 3</span>





</div>

</section>

<section class="section4">


<div>



<span>Section 4</span>





</div>

</section>

<section class="section5">


<div>



<span>Section 5</span>





 </div>

</section>
</div>

Cree una nueva instancia de fullScroll y done.

new fullScroll({


// options here
});

Opciones y valores predeterminados.

new fullScroll({



// parent container


container : 'main',



// content section


sections : 'section',



// animation speed


animateTime : 0.7,



// easing for animation


animateFunction : 'ease',



// current position


currentPosition: 0,



// display dots navigation


displayDots: true,



// where to place the dots navigation


dotsPosition: 'left'

});