Cómo recrear en puro Css el efecto scroll de la nueva web de e-bay 15.11.12
Demo Css: Recreación con puro Css del efecto scroll de la nueva página de e-bay.
Cómo recrear en puro Css el efecto scroll de la nueva web de e-bay
En este tutorial vamos a recrear el efecto de desplazamiento que se ve en el nuevo sitio de e-bay. Vamos a crear un sitio RWD de una sóla página web de presentación de la belleza y los beneficios de la lavanda. No es necesario javascript, sólo vamos a utilizar css.
Créditos y autoría
Lo que sigue es un artículo original de PeHaa Hetman publicado en pepsized el 10 de Noviembre de 2012.
Este artículo NO se publica bajo la licencia Beerware de este blog sino bajo la que su autor usa.
Todos los créditos y reconocimientos, incluidas las imágenes, a ella. Los errores de traducción, míos.
Ver demo Original & Download files
Paso 1: Materiales
Necesitaremos tres imágenes de fondo, que cubrirán por completo toda la anchura de la página. Los míos son aproximadamente 1800 x 1200px
Paso 2: Html
El etiquetado html es simple. El contenido de cada parte se envuelve en un div con una clase de "wrapper" que se encuentra dentro de un section o el header (para la parte introductoria).
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Para amantes de la lavanda</title>
...
</head>
<body>
<header class=" content">
<div class="wrapper">
<h1>Para amantes de la lavanda</h1>
<p><span>Lavender</span> (botanic name Lavandula) is a ....
</p>
</div>
</header>
<section class="content" id="oil">
<div class="wrapper">
<p><span>Lavender oil</span> is an ... </p>
</div>
</section>
...
<footer>
<div class=wrapper>
"From love for lavender" has been built ...
</div>
</footer>
</body>
</html>
Paso 3: Css básico
La clase "wrapper" se define como sigue. La propiedad box-sizing permite alterar el modelo tradicional de caja Css. Si dejamos su valor en border-box, la anchura y la altura incluyen el relleno y el borde.
.wrapper {
width: 100%;
margin: 0 auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Como queremos que cada sección y la cabecera tengan un comportamiento RWD, vamos a utilizar sólo unidades porcentuales. Por ejemplo: la imagen de fondo para la primera sección de 500px de ancho, lo que representa 500px/1200px * 100% = 41,66667%
#oil .wrapper {
background: url(../images/lavender2.jpg) 4.16667% center no-repeat;
padding: 10% 4.16667% 10% 50%;
background-size: 41.66667% auto;
}
El valor de 4.16667% corresponde a 50px cuando "wrapper" alcanza su anchura mínima.
Y en el caso de los monitores más grandes lo cubrimos con una media query:
@media only screen and (min-width: 1200px) {
.wrapper {
width:1200px; }
/*........*/
#oil .wrapper {
padding: 120px 50px 120px 600px; }
}
Puedes ver todas las propiedades o en la página de la demo o en descargable.
Paso 4: El efecto del scroll
No utilizamos ningún Javascript, nuestro efecto de desplazamiento se obtiene únicamente con CSS. No queremos marcado html adiccional, por lo que vamos a utilizar el pseudoelemento ::after. Va a ser colocado debajo de cada sección y cubierto con la imagen de fondo. Vamos a establecer la propiedad background-attachment: fixed (ver el fondo a fondo). También vamos a añadir una sombra interior única para dar la ilusión de profundidad:
section:after, header:after {
content: "";
display: block;
height: 400px;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.6); }
Sólo tenemos que asignar cada imagen del background a cada sección:
header:after {
background-image: url(../images/lavenderbg1.jpg); }
#oil:after {
background-image: url(../images/lavenderbg2.jpg); }
#culinary:after {
background-image: url(../images/lavenderbg3.jpg); }
#dried:after {
background-image: url(../images/lavenderbg4.jpg); }
Paso 5: Últimos retoques
Como background-attachment: fixed no es soportada en Safari móvil añadimos una @media query:
@media only screen and
(min-device-width: 768px) and
(max-device-width: 1024px),
only screen and
(min-device-width: 320px) and
(max-device-width: 480px)
{
section:after, header:after {background-attachment: scroll;}
}
También vamos a reducir proporcionalmente el font-size para monitores más pequeños:
@media only screen and (max-width: 600px) {
body {font-size: .75em;}
}
¡Y eso es todo! Espero que encuentres útil esta técnica, no dudes en ir más lejos -este tutorial es sólo una inspiración-.
En espera de tus comentarios. Gracias.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
El efecto está una berraquera, que elegante y atractivo, me encantó y era justo lo que llevaba buscando hace 4 días para un diseño nuevo que necesito.
ResponderEliminarSin embargo aunque podré usarlo y editarlo, no comoprendo el funcionammiento en totalidad.
Pero está muy bueno tu artículo, Gracias!!!
Hola Enrique
ResponderEliminarQué bueno que te haya sido de utilidad.
El efecto se conoce como parallax. Tienes mucha info en google sobre él.
Básicamente consiste en hacer que 2 elementos se desplacen a distinta velocidad.
En este caso logrado con puro Css, en otros con js.
A ver si de forma rápida soy capaz de explicártelo:
Las partes "principales" de la demo que contienen la info (header, sectión...) tienen un height mayor que el .wrapper que contienen, y su fondo (las imágenes del psuedoelemento section:after, header:after) están posicionadas (background-attachment: fixed).
Así que al hacer el scroll los .wrapper se desplazan pero las imágenes permanecen.
Un saludo
uy gracias, eres muy inteligente
ResponderEliminarGenial sin duda.. aunque quedé algo gringo
ResponderEliminar