Como crear un diseño Parallax
¿Como hacer un diseño parallax?
Buen dia a todos, ahora veremos como crear un diseño parallax para nuestra pagina web, las web parallax son todas aquellas que como fondo tienen una imagen o textura y estos se mueven mas lento que el contenido al bajar.
Probablemente ya hayas visitado muchas paginas con un diseño parallax y pues podras decir Wow y podemos creer que su diseño es super complicado pues no, en este post veras que sencillo es hacer de tu web un diseño parallax, ademas te adjuntare un pequeño ejemplo que desarrolle.
Primero veremos el maquetado en donde crearemos dos contenedores para nuestras poner nuestras imagenes de fondo.
<html>
<head>
<link href="Style.css" rel="stylesheet" />
<title> </title>
</head>
<body>
<div class="Articulo1">
<div class="Title"><h1>Parallax Design</h1></div>
<br />
<div class="Content"></div>
<div class="Articulo2">
<div class="Title">
<h1>Mis Coders Parallax Design</h1></div>
<div class="Content"></div> </div>
</body>
</html>
Como veran en el maquetado de nuestra web con diseño parallax no hay nada del otro mundo, simplemente dos contenedores con clases Articulo1 y Articulo2 que son practicamente los contenedores donde pondremos nuestras imagenes de fondo y lo demas donde esta el contenedor que tiene la clase Title es donde pondremos los titulos y ahora veremos el css que es donde se encuentra la magia: * {
margin:0;
padding:0;
}
.Articulo1 {
width: 100%;
height:650px;
background-image:url(puente-de-madera-al-ayardecer.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
padding:15px;
}
.Title {
width:80%;
height:70px;
background:rgba(254, 254, 254, 0.90);
margin: auto;
padding: 10px;
}
p {
font-family: Verdana Cambria;
}
h1 {
font-size:25px;
Text-align:center;color: rgba(52, 12, 189, 0.88);
}
.Content {
width:80%;
height:auto;
padding:10px;
background:rgba(254, 254, 254, 0.90);
margin: auto;
}
.Articulo2 {
width: 100%;
height:650px;
background-image:url(paisaje-montana-2.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
position: relative;
padding:15px;
}
Ahora veamos que en el css, tampoco hay nada que sea del otro mundo pues para que se vea el efecto todo es poner la imagen de fondo el background-attachment : fixed y Listo.
Descarga el Ejemplo: Descargar
