scrollpage
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
304
Visitas
1
Resp
Por alber hace 1 mes
Admin
Respuesta #1
sencilla y funcionando perfecto en mi sitio web.
0
Puntos
Por proelite hace 1 mes
Novice
Para comentar Inicia sesión o Regístrate
Phpres 2025@ All rights reserved.
Utilizamos cookies para mejorar la navegación en el sitio. Más información Aceptar