Entre las muchas características de diseño súper agradables de Yahoo! La aplicación Weather para iOS es la transición entre las pantallas de la ciudad. La imagen de fondo no solo se aleja a medida que la pantalla se mueve de una pantalla a la siguiente, la imagen de fondo en sí se desliza. Parece estar ocultando parte de la pantalla “antigua” y revelando más de la pantalla “nueva” aquellos que están más cerca de estar a la vista.
Intentemos llevarlo a cabo en la web.
El HTML
Como cualquier control deslizante, hay tres componentes principales:
- El contenedor que tiene todo en forma
- Un contenedor deslizante que es tan ancho como todos los toboganes en una fila.
- Cada contenedor lateral individual
No nos preocuparemos demasiado por el contenido dentro de la diapositiva. Solo agregaré la temperatura para mostrar que cada diapositiva puede contener contenido en la parte superior.
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">74°</span></div>
<div class="slide" id="slide-1"><span class="temp">64°</span></div>
<div class="slide" id="slide-2"><span class="temp">82°</span></div>
</div>
</div>
El contenedor puede ser un <section>
, las diapositivas pueden ser <article>
. Depende realmente. Le dejaré tomar las decisiones semánticas para sus propias necesidades.
El plan de distribución es así:
El CSS
El “control deslizante” (contenedor visual) y las diapositivas deben tener explícitamente el mismo tamaño. Usaremos píxeles aquí, pero podrías hacer que funcione con cualquier cosa.
.slider {
width: 300px;
height: 500px;
overflow-x: scroll;
}
.slide {
float: left;
width: 300px;
height: 500px;
}
Hacer flotar esas diapositivas hacia la izquierda no las alineará en una fila, porque el elemento principal de las diapositivas no es lo suficientemente ancho como para permitirles hacer eso. Esa es una de las razones por las que necesitamos el elemento de soporte. Tendrá un ancho de 300% (Núm. De portaobjetos × 100%) que se ajustará exactamente a tres portaobjetos.
.holder {
width: 300%;
}
Cada una de nuestras diapositivas tiene una identificación única. Esto es útil porque, si lo elegimos, podemos crear enlaces de anclaje que enlacen a esos ID y el control deslizante “saltará” a esas diapositivas. Agregaremos JavaScript para hacer un “deslizamiento” real, pero nuestro control deslizante funcionará incluso sin eso. Las identificaciones lo hacen posible, así que usémoslas aquí para incluir algunas imágenes de fondo encantadoras.
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
Con todo esto en su lugar, nuestro diseño toma forma:
El CSS (desvanecimiento negro)
Solo como un pequeño detalle, la temperatura configurada en blanco puede correr el riesgo de no ser visible según la foto que se encuentre detrás. Para asegurarnos de que así sea, podemos hacer que la foto se desvanezca sutilmente a negro hacia la parte inferior. Un pseudo elemento funcionará bien.
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(transparent, black);
}
Una explicación de la imagen está en orden aquí:
El JavaScript (deslizamiento de fondo)
Vamos a usar jQuery aquí porque amamos la vida. Nuestro objetivo es ajustar la posición de fondo de las diapositivas a medida que nos desplazamos. Podemos establecer la posición de fondo en porcentajes en CSS, pero eso por sí solo no hace el efecto de ocultar / revelar más genial que estamos buscando. Según la cantidad desplazada (que podemos medir en JavaScript), ajustaremos la posición de fondo. Solo, se vería así:
$("#slider").on("scroll", function() {
$(".slides").css({
"background-position": $(this).scrollLeft()/6-100+ "px 0"
});
});
El “6” y el “-100” son números mágicos. No números mágicos CSS que son propensos a la fragilidad, sino números mágicos tradicionales. Solo algunos números que hacen que el efecto funcione. Un fastidio, tal vez, pero no tanto. Las cosas de diseño a veces son así. Quizás sea mejor dejar un comentario en el código a tal efecto. Estos números en particular se basan en las imágenes que utilicé y su tamaño y lo que se veía bien.
El efecto aquí es el cambio de fondo que buscamos:
Observe que la parte menos del tranvía amarillo es visible cuando el tobogán está casi fuera de la vista.
El JavaScript (impartir estructura)
Ese pequeño fragmento de JavaScript parece solitario allí arriba sin ninguna estructura detrás. Un control deslizante es una gran excusa para ver una forma sencilla de estructurar JavaScript.
Podemos hacer que todo lo relacionado con el control deslizante sea un objeto.
var slider = {
};
Luego, agruparemos los elementos relacionados en un área, uniremos nuestros eventos y escribiremos pequeñas funciones que hacen cosas muy específicas.
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide")
},
init: function() {
// manual scrolling
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
},
moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
}
};
slider.init();
El HTML (agregando navegación)
Agregar cosas de deslizar sería súper (súper) dulce (pista). Pero por ahora agreguemos pequeños enlaces que se puedan presionar para cambiar las diapositivas, en lugar de depender de la barra de desplazamiento. Incluso puede eliminar la barra de desplazamiento en la vida real (desbordamiento directo hacia arriba: oculto; en el contenedor). Lo que necesitamos son enlaces de anclaje que enlacen con los ID de las diapositivas individuales.
<nav class="slider-nav">
<a href="https://css-tricks.com/slider-with-sliding-backgrounds/#slide-0" class="active">Slide 0</a>
<a href="#slide-1">Slide 1</a>
<a href="https://css-tricks.com/slider-with-sliding-backgrounds/#slide-2">Slide 2</a>
</nav>
Dale estilo a esos como quieras. Para la demostración, los hago pequeños círculos grises con el texto oculto.
El JavaScript (agregando navegación)
Nuestra estructura es más útil ahora. Simplemente agregamos algunos elementos más con los que estamos tratando, agregamos un nuevo evento que estamos observando (clics en navegación) y escribimos una pequeña función para lidiar con ese evento.
Sabemos hasta dónde se puede animar la posición de desplazamiento cuando se hace clic en un enlace de navegación desde la ID del enlace mismo. El enlace podría ser href = ”# slide-1 ″, del cual podemos obtener“ 1 ”fácilmente. Entonces, la posición a la que debemos desplazarnos es (1 × ancho de diapositiva), por lo que 300 en nuestro caso. Almacenaremos ese valor 300 directamente en JavaScript.
var slider = {
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 300, // could measure this
init: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
},
moveSlidePosition: function(event) {
// Magic Numbers
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft()/6-100+ "px 0"
});
},
handleNavClick: function(event, el) {
// Don't change URL to a hash, remove if you want that
event.preventDefault();
// Get "1" from "#slide-1", for example
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
// Remove active from all links
this.el.allNavButtons.removeClass("active");
// Add back to the one that was pressed
$(el).addClass("active");
}
};
slider.init();
Tenemos una clase “activa” en los enlaces de navegación solo para usar en CSS para indicar visualmente qué diapositiva está activa. Lo manejamos eliminando “activo” de todos los enlaces y luego volviéndolo a agregar al que se hizo clic.
¡Manifestación!
Check out this Pen!