Cómo recrear en puro Css el efecto scroll de la nueva web de e-bay

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

Por Kseso ✎ 5

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.

efecto background scroll

Créditos y autoría

@PeHaaPor @PeHaa
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.

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 Don Kseso Kseso

Comentarios: 5

  1. Bastante atractivo el efecto

    ResponderEliminar
  2. 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.
    Sin embargo aunque podré usarlo y editarlo, no comoprendo el funcionammiento en totalidad.
    Pero está muy bueno tu artículo, Gracias!!!

    ResponderEliminar
  3. Hola Enrique
    Qué 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

    ResponderEliminar
  4. Anónimo15/1/13

    uy gracias, eres muy inteligente

    ResponderEliminar
  5. Genial sin duda.. aunque quedé algo gringo

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap