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:  77
English French German Italian Portuguese Spanish
 
 
Inicio | Blogs | Recursos y trucos para programación Web

Recursos y trucos para programación Web

9
NOV.
2014
 
 
 

Crear un sencillo efecto parallax usando CSS

Publicado por Desarrollo Multimedia Team | domingo, 9 de noviembre de 2014 a las 01:56 h.
7459  
 

Es increíble lo que algunas propiedades CSS pueden llegar a dar de si, como es el caso de la propiedad background-size y su valor cover. Si combinamos esta propiedad con min-height podremos crrear un sencillo efecto parallax que, aún siendo menos espectacular que los que se pueden crear con jquery, puede ser un buen recurso de diseño.

 


Para crear este efecto parallax solo he usado unas cuantas lineas de CSS y unas imágenes muy chulas del universo. Básicamente la propiedad background-size hace todo el trabajo y nosotros solo tenemos que ayudarla un poco.

En la parte HTML seria algo así:

<div class="image1">
    <h1>Titulo de la pagina</h1>
    <h2>Texto entre secciones</h2>
</div>
 
<section class="content">
    <p>Texto de la pagina. Parte 1</p>
</section>
 
<div class="image2">
    <h2>Texto entre secciones</h2>
</div>
 
<section class="content">
    <p>Texto de la pagina. Parte 2</p>
</section>
 
<div class="image3"> 
    <h2><a href="#">VOLVER ATRAS</a></div></h2>
</div>

Cada clase image es uno de los fondos situados entre el contenido, el cual recibe su estilo de la clase content. Para tener mas imágenes o mas contenido tan solo tenemos que duplicar estas clases. En este ejemplo he usado imágenes diferentes para resaltar el efecto, pero también se podría usar la misma imagen en todos los intervalos, con lo que veríamos una parte diferente de la misma imagen en cada uno.

 

En cuanto al CSS, seria algo tan sencillo como esto:

body {
    margin:0;
    padding:0;
    border:0;
}
 
.image1 {
    position:relative;
    background: url("universo.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px;
     
}
 
.image2 {
    position:relative;
    background: url("universo2.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px; 
}
 
.image3 {
    position:relative;
    background: url("universo3.jpg") no-repeat fixed;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 500px; 
}
 
h1 {
    color: #fff;
    font-size: 80px;
    text-align:center;
    font-weight: bold;
    margin: 0 auto;
    width: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -20%;
    margin-left: -400px;
    opacity:0.8;
}
 
h2{
    color: #fff;
    font-size: 55px;
    text-align:center;
    margin: 0 auto;
    width: 800px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    opacity:0.8;
}
 
.content {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    position: relative;
    background: #FFF;
    z-index:2;
 
}

Como decía al principio lo mas importante es situar las imágenes usando el valor cover de la propiedad background-size y darles unas medidas mínimas (min-height). En cuanto a los textos, voy jugando con las posiciones fijas y absolutas para que se muevan con el contenido o se queden fijados al fondo. 

Importante también es dar una posición relativa a cada imagen de fondo, para poder posicionar texto u otros elementos sobre ella en posición absoluta, tomando como referencia las medidas de esta ventana o franja de imagen.

Con la propiedad box-sizing fijada en border-box tan solo estamos forzando al div para que tome el ancho especificado, independientemente de los padding u otras propiedades que puedan afectar a su forma. Si quieres aprender mas sobre esta propiedad puedes echarle un vistazo en w3schools.

 

 

Y hasta aquí llego yo con esta especie de efecto parallax, espero que os sea de utilidad y si lo mejoráis, porque seguro que todavía es bastante mejorable,  no dudéis en comentármelo.

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