Autor:

Efecto slide vertical o scroll con CSS3

3
8995

Una manera sencilla de crear contenido a pantalla completa, con scroll oculto y simulando un scroll, con animación al cambio de contenedor al pinchar los enlaces para seguir al contenido siguiente.

Recomendado para usarse con webs en las que se quiera destacar imagenes con mínima descripción.

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
html{      
    width:100%;
    height:100%;       
}
 a{
	color: white;
	background: #00bdff;
	padding: 20px 10px 20px 10px;
	border:2px solid white;
	text-decoration: none;
 }
body{
    color:white;
    font-family: Open Sans;
    margin:0;
    width:100%;
    height:100%;
    background-color:#00bdff;
 
}
.efecto{
    overflow:hidden;
    position:relative;
    font-size:3em;
    width:100%;
    height:0;
    -webkit-transition: all 500ms ease-out;
    -moz-transition:all 500ms ease-out;
    transition: all 500ms ease-out;
 
}
#contenedor{
    position:absolute;
    width:100%;
    height:100%;
    font-size:3em;
    overflow:hidden;
 
}
 
#contenedor1{
    background-color:white;
    color:#00bdff;  
}
 #contenedor2{
    background-color:#00bdff;
    color:white;  
}
#contenedor3{
    background-color:white;
    color:#00bdff;  
}
.efecto:target{
    height:50%;
}
 
 
#desarrollofrontend a{
	padding: 0px;
	border:none;
 
}
#desarrollofrontend{
	padding: 10px 0px 10px 0px;
	background: #00bdff;
	color: white;
	width: 100%;
	bottom: 0px;
	position: fixed;
	padding-left: 15px;
}

La clase .efecto de CSS

Da el efecto al contenedor y características genéricas, que en este caso

    -webkit-transition: all 500ms ease-out;
    -moz-transition:all 500ms ease-out;
    transition: all 500ms ease-out;

daría un efecto de animación de movimiento del contenedor con un tiempo en milisegundos.
Usando varias composiciones del parámetro transition de CSS3 para su correcta visualización en diferentes navegadores web.

:target

Pseudo-clase de CSS, se activa cuando el target de un elemento se activa, como ejemplo, cuando pinchamos un link y este nos posiciona a una parte concreta del texto de esa misma página en la que estamos.

Es muy importante esta Pseudo-clase, ya que es la que nos proporciona el posicionamiento de un div a otro al hacer click en el link.

.efecto:target{
    height:100%;
}

Este código anterior interpreta que el contenedor donde aparezca la clase .efecto debe tener una altura del 100% de la pantalla.
importante ya que si cambiamos el valor a 0px ocultaría la ventana, también en le caso que fuera 50% solo interpretaría que debe mostrar un 50% del alto del elemento o contenedor con respecto al tamaño de pantalla.

HTML

<div id="contenedor">
<h2>Efecto slide scroll</h2>
CSS3
<h6>usando la pseudo-clase :target para acceder mediante enlaces.</h6>
<a href="#contenedor1">siguiente</a>
 
</div>
<div id="contenedor1" class="efecto">
<h2>1º contenedor</h2>
<a href="#contenedor2">siguiente</a>
 
</div>
<div id="contenedor2" class="efecto">
<h2>2º contenedor</h2>
<a href="#contenedor3">siguiente</a>
 
</div>
<div id="contenedor3" class="efecto">
<h2>3º contenedor</h2>
<a href="#contenedor">siguiente</a>
 
</div>

href

Asignamos en el href=”#contenedor” del enlace, en este caso el id, del elemento al que queremos que nos posicione y creamos tantos contenedores como queramos con target vinculados a otro elemento o contenedor.

Identificamos los contenedores con las propiedades de la clase .efecto

Mira este ejemplo funcionando

See the Pen Efecto slide vertical con CSS3 by Alber Pedraza (@AlberPedraza) on CodePen.

  • Keli Rubi

    Excelente muchas gracias!

    • AlberPedraza

      Me alegro que te sirva, de nada Keli!

  • lerh

    muchisimas gracias por compartir, disculpa no se mucho de esto, estoy aprendiendo, que puedo hacer para que el efecto también se vea en haciendo scroll, con el mouse.

    se ve padrisimo

    gracias nuevamentte

Temas del árticulo

CSS