
Con este nuevo script o plugins tipo fullpage.js creado solo con javascritp, podemos crear animaciones dinámicas y modernas en nuestras paginas web sin necesidad de usar jquery ni apis de pago, voy a explicar su uso junto con una demo y todas sus características.
Demo
Lo principal es descargar el plugin desde los siguientes enlaces:
Link directo scrollpage_V1.0.js
Link Dropbox scrollpage_V1.0.js
Agregar archivos styles.css y scrollpage.js a nuestro carpeta proyecto
Cargar el plugin:
Agregar el script scrollpage.js, stytes.css y el init de la función al head de la página:
<link rel="stylesheet" href="styles.css">
<script src="scrollpage.js"></script>
<script>
window.addEventListener('load', function () {
initScrollPage({
speed: 500,
navigation: true,
footer: false
});
});
</script>Config:speed: velocidad en milisegundos (300/600 recomendado )
navigation: activar o desactivar los dots de navación laterales ( true o false )
footer: animación en footer si o no ( true o false )
Creamos una div con la clase .scrollpage y dentro sectores con la clase .section (todos cuanto queramos), las imágenes de cada section se asignan con src-img="ruta_imagen":
<div class="scrollpage">
<div class="section" src-img="https://i.imgur.com/esqGkMh.jpeg">
<div class="center">
<h1>Sección 1</h1>
</div>
</div>
<div class="section" src-img="https://i.imgur.com/UDJFJ5D.jpeg">
<div class="center">
<h1>Sección 2</h1>
</div>
</div>
<div class="section" src-img="https://i.imgur.com/G2PkvZ6.jpeg">
<div class="center">
<h1>Sección 3</h1>
</div>
</div>
<div class="section" src-img="https://i.imgur.com/ZsVs1Hs.jpeg">
<div class="center">
<h1>Sección 4</h1>
</div>
</div>
</div>El script reconocerá todas las secciones automáticamente y asignara las imágenes de fondo.Navegación menú:
Opción de crear navegación desde el menú asignando la clase .navigation al nav principal y class="index-1", class="index-2 a los li de los enlaces" ( referiéndose a cada sección por orden index-x):
<header class="header">
<nav class="navigation">
<ul>
<li class="index-1"><a href="#portada">Sección 1</a></li>
<li class="index-2"><a href="#nosotros">Sección 2</a></li>
<li class="index-3"><a href="#galeria">Sección 3</a></li>
<li class="index-4"><a href="#contacto">Sección 4</a></li>
</ul>
</nav>
</header>Footer ejemplo:<footer class="footer">
<span>
ScrollPage by <a href="https://phpres.net">Phpres.com</a>
</span>
</footer>Se trata básicamente un fullpage.js sencillo, responsive y open source totalmente gratuito, cualquier duda o recomendación, comentad.
Editado
0
Puntos
Puntos
304
Visitas
Visitas
1
Resp
Resp
Por alber hace 1 mes
Admin
Respuesta #1
sencilla y funcionando perfecto en mi sitio web.
0
Puntos
Puntos
Por proelite hace 1 mes
Novice