Utilizamos cookies y tecnologías similares propias y de terceros, de sesión o persistentes, para hacer funcionar de manera segura nuestra página web y personalizar su contenido. Igualmente, utilizamos cookies para medir y obtener datos de la navegación que realizas. Puedes configurar y aceptar el uso de cookies a continuación. Asimismo, puedes modificar tus opciones de consentimiento en cualquier momento visitando nuestra Política de cookies. y obtener más información haciendo clic aquí.
 
Recuperar contraseña    
Usuarios Online:  24
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

8
NOV.
2014
 
 
 

Efecto scroll deslizante a pantalla completa usando solo CSS

Publicado por Desarrollo Multimedia Team | sábado, 8 de noviembre de 2014 a las 23:50 h.
8232  
 

Cada vez esta mas de moda hacer paginas con efectos scroll extravagantes, con desplazamientos horizontales, en circulo, efecto parallax etc. También es tendencia usar estos scroll en sitios a pantalla completa, que se adapten a la resolución de los usuarios. Existen numerosos plugin Jquery para crear este tipo de efectos, pero en esta ocasión no voy a usar ninguno, de hecho no voy a usar ni Javascript, tan solo transiciones CSS y enlaces para deslizarme de una sección a otra de la pagina. Échale un vistazo al ejemplo para ver a que me refiero:

 DEMO SOURCE


¿Qué te parece? Un efecto interesante ¿No? Podría ser útil por ejemplo en una landing page para dar a conocer algún producto, o para crear una cronología en un portfolio. 

Una vez más, los controles para activar la transicion,  dependen del selector target de CSS3. En cuanto a su implementación, no te llevará más de 5 minutos tenerlo funcionando, sin necesidad de tener conocimientos de programación, puesto que es solo CSS

En primer lugar situaremos los div, que contendrán lo que sea que queramos mostrar en cada escena:

<div id="inicio">
    <p>SCROLL DESLIZANTE CON CSS</p>
    <p>(UNA FORMA SENCILLA Y ELEGANTE DE SCROLLEAR)</p>
    <img src="/batmanyrobinmeme3.jpg" alt="meme de batman y robin 1" />
    <a class="next" href="#escena1">COMENZAR...</a>
</div>
<div id="escena1" class="panel">
    <p>CREA UN SIMPLE EFECTO SCROLL CON UNAS POCAS LINEAS DE CSS Y SIN USAR JAVASCRIPT</p>
    <img src="/batmanyrobinmeme.jpg" alt="meme de batman y robin 2" />
    <a class="next" href="#escena2">SIGUE LEYENDO...</a>
         
</div>
<div id="escena2" class="panel"> 
    <p>LOS ENLACES ANIMAN EL CONTENIDO MEDIANTE TRANSICIONES CON AYUDA DEL SELECTOR TARGET</p>
    <img src="/batmanyrobinmeme4.jpg" alt="meme de batman y robin 1" />
    <a class="next" href="#escena3">CONTINUA...</a>
         
</div>
<div id="escena3" class="panel"> 
    <p>PARA MAS INFORMACION VISITA LA ENTRADA EN EL BLOG DE DESARROLLO WEB DE <a href="https://mmteam.controldedominios.com/entradaBlog.asp?blog=3&cod=55">MMTEAM.CONTROLDEDOMINIOS.COM</a></p>
    <a class="next" href="#escena1">VOLVER A EMPEZAR</a>
    <img src="/batmanyrobinmeme2.jpg" alt="meme de batman y robin 3" />  
</div>

Son 4 divs con sus respectivos contenidos, no parece que haya nada especial, salvo por los enlaces. Cada enlace apunta al div siguiente lo que nos va a permitir saltar de uno a otro.

Para que los cambios entre secciones se hagan con efecto deslizante tendremos que usar un poco de CSS:

html{      
    width:100%;
    height:100%;       
}
 
body{
    margin:0;
    width:100%;
    height:100%;
    background-color:#FA5858;
}
.panel{
    position:relative;
    width:100%;
    height:0;
    overflow:hidden;
    -webkit-transition: all 700ms ease-out;
    -moz-transition:all 700ms ease-out;
    transition: all 700ms ease-out;
}
#inicio{
    position:absolute;
    width:100%;
    height:100%;
    font-size:70px;
    overflow:hidden;
}
 
#escena1{
    background-color:#D7DF01;  
}
 
#escena2{
    background-color:#00BFFF;  
}
 
#escena3{
    background-color:#FF8000;  
}
 
.panel:target{
    height:100%;
}

La clave de la animación esta en ocultar todos los div con "height:0", para posteriormente devolverlos a su tamaño original, mediante una transición CSS. Esta transición es disparada por el selector target, el cual cambiara el estilo correspondiente, en este caso la altura, al div que contenga el enlace pulsado.

Para poder iniciar el efecto es necesario tener un div fijo que no se anime, ya que de lo contrario estarían todos contraídos y no tendríamos que pulsar, en este caso el div inicio. Al ser todo posiciones absolutas, este div quedara abajo cuando se muestren los demás, por lo que no se verá una vez iniciado el efecto.

También es importante aplicar el "overflow:hidden" a cada sección, para evitar las barras de scroll, y que el usuario pueda scrollear sin usar los enlaces.

Y eso es todo, podría seguir dándole vueltas pero es que no hay mas, son 4 enlaces, una transición y el selector target de CSS3. Si necesitas mas información, descarga el código fuente desde estos enlaces, o pregunta lo que quieras.

 

Conclusión

Puede que este scroll deslizante no este a la altura de los plugin existentes pero, si no podemos o no queremos usar Javascript, ya sea por motivos de accesibilidad o de velocidad, siempre podremos simular el desplazamiento gracias a las transiciones y selectores CSS. 
 
Artículo seleccionado del Blog de Agustin Baraza en www.nosolocss.com/
 
 
¿Te ha gustado el artículo? ¡Suscríbete YA!
Únicamente recibirás un breve resumen mensual de los últimos post