iPhone 5S-como un efecto de desplazamiento de página web con JavaScript y CSS3
| Autor: | peachananr |
|---|---|
| Views Total: | 2,069 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 16, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Un componente de JavaScript impresionante hecho por < a href = "https://github.com/peachananr" target = "_ blank" rel = "noopener" > peachananr que le ayuda a crear un efecto de desplazamiento vertical de una página de pantalla completa como se ve en el < a href = "https://www.apple.com/iphone-5s/" target = "_ blank" rel = "noopener" > iPhone 5S Página Web. Puede desplazarse por un conjunto de secciones con el ajuste automático con la rueda del ratón, el teclado o haciendo clic en la navegación lateral.
Uso básico
Agregue el onepage-scroll. CSS y onepagescroll. js en la sección Head de su página web.
<link href="onepage-scroll.css" rel="stylesheet"> <script src="onepagescroll.js"></script>
El marcado HTML debe ser así:
<div class="main"> <section>...</section> <section>...</section> ... </div>
El JavaScript para habilitar el efecto de desplazamiento.
onePageScroll(".main"); Estas son algunas opciones para personalizar el efecto de desplazamiento.
onePageScroll(".main", {
sectionContainer: "section",
easing: "ease",
animationTime: 1000,
pagination: true,
updateURL: false,
keyboard: true,
beforeMove: null,
afterMove: null,
loop: false,
responsiveFallback: false
});
