Efecto scroll deslizante a pantalla completa usando solo css

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:

¿Que 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 mas, los controles para activar la transicion,  dependen del selector target de css3, el cual ya use con anterioridad para crear ventanas modales.

 

En cuanto a su implementación, no te llevara mas de 5 minutos tenerlo funcionando, sin necesidad de tener conocimientos de programación, puesto que es solo CSS. Sigue leyendo y te muestro como hacerlo.

 

En primer lugar situaremos los div, que contendran 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 <a href=”/www.nosolocss.com”>NOSOLOCSS.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.