En esta entrada explicaremos como crear un carousel vertical que ocupe toda la pantalla (fullscreen); cuyo desplazamiento se realice mediante la rueda del ratón o mediante un sencillo menú lateral izquierdo con las características viñetas ubicadas en el lateral izquierdo del carousel en general este tipo de carousel son muy empleados en sistemas modernos ya que son muy visuales y permite presentar una galería de imágenes de manera muy práctica.
Definiendo la estructura HTML de la galería vertical
Primero crearemos la estructura HTML de nuestro documento, la misma estará comprendida por de menú de navegación fijo lateral:
<nav>
<li class="active"><a href="#polyscape-1"></a></li>
<li><a href="#polyscape-2"></a></li>
<li><a href="#polyscape-3"></a></li>
<li><a href="#polyscape-4"></a></li>
<li><a href="#polyscape-5"></a></li>
</nav>Y cada uno de los fondos que ocuparan el total de la pantalla, con el menú lateral izquierdo definido anteriormente se emplea para el desplazamiento entre cada uno de los fondos que definimos a continuación:
<div id="polyscape-1" class="polyscape-background"></div>
<div id="polyscape-2" class="polyscape-background"></div>
<div id="polyscape-3" class="polyscape-background"></div>
<div id="polyscape-4" class="polyscape-background"></div>
<div id="polyscape-5" class="polyscape-background"></div>Un punto importante es notar que en el menú definimos en el atributo href el identificador (atributo id) de los fondos, lo que significa que empleamos el destino de estos enlaces representan el inicio de estos contenedores por el funcionamiento básico que permite la API de HTML.
CSS para el menú fijo y la galería Fullscreen
El siguiente CSS sirve para fijar el menú lateral en en lateral izquierda y ubicarlo en el centro, para ello se emplean propiedades como position, display, justify-content, etc:
nav {
position: fixed;
left: 40px;
top: 0;
height: 100%;
list-style: none;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 10;
}
nav li {
padding: 10px 0;
}
nav li a {
position: relative;
display: block;
}
nav li a:after {
content: "";
display: block;
width: 16px;
height: 16px;
border-radius: 50%;
border: 2px solid #FFF;
transition: 0.2s;
}
nav li.active a:after {
background: #FFF;
}
nav.dark li a:after {
border: 2px solid #444;
}
nav.dark li.active a:after {
background: #444;
}Ahora definimos el CSS para que los fondos ocupen el 100% de la pantalla; para eso se emplea principalmente el CSS definido en polyscape-background:
.polyscape-background {
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
align-items: center;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
.polyscape-background > div {
position: absolute;
}
#polyscape-1 {
background-image: url(../images/polyscape-1/mountain.jpg) ;
}
#polyscape-2 {
background-image: url(../images/polyscape-2/mist.jpg) ;
}
#polyscape-3 {
background-image: url(../images/polyscape-3/space.jpg) ;
}
#polyscape-4 {
background-image: url(../images/polyscape-4/lake.jpg) ;
filter: grayscale(25%);
}
#polyscape-5 {
background-image: url(../images/polyscape-5/mountain.jpg) ;
}¿Cómo activamos/desactivamos las viñetas en el menú
Para ello empleamos el siguiente código jQuery:
Este código captura los eventos clic del menú lateral y anula el comportamiento por defecto y desplaza el fondo de manera programática a través de una animación:
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});Este código registra en un array el alto de cada uno de los contenedores que contiene el fondo en fullscreen:
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});Finalmente, el siguiente código determina la posición del usuario con respecto a los fondos para activar/desactivar las viñetas del menú lateral:
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop();
// Get id of current scroll item
var cur = scrollItems.map(function(){
if ($(this).offset().top-100 < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length-1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
if (id=='polyscape-5') {
menu.addClass('dark');
}
else {
menu.removeClass('dark');
}
menuItems
.parent().removeClass("active")
.end().filter("[href='#"+id+"']").parent().addClass("active");
}
});carousel automático infinito con jQuery y CSS
En esta entrada veremos cómo crear un carousel automático e infinito con jQuery y un poco de CSS como el que está colocado en la cabecera de esta entrada como imagen promocional.
Definiendo la estructura HTML del carousel infinito
Primero definimos la estructura del carousel infinito mediante el siguiente HTML:
<ul id="c">
<li><p><strong>1</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>2</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>3</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>4</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>5</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>6</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>7</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>8</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>9</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>10</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>11</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
<li><p><strong>12</strong></p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p></li>
</ul>Definiendo el estilo crítico del carousel infinito
Definimos el CSS del ul para centrar el carrusel:
body > ul {
position: absolute;
top: 50%;
width: 800px;
height: 200px;
left: 50%;
margin-left: -400px;
margin-top: -130px;
}Se mostraran 4 ítems por vez y de aquí el width con 25% para cada uno de los ítems:
ul > li {
width: 25%;
list-style-type: none;
position: absolute;
top: 0;
padding: 20px;
height: 200px;
opacity: 0;
padding-top: 40px;
text-align: center;
transition: 1s opacity;
}El resto del CSS de propósito decorativo para nuestro carousel infinito como podrá consultar en el código fuente que puedes descargar al final e inicio de esta entrada.
El siguiente código JavaScript con jQuery permite reiniciar el carousel una vez llegado a su fin y de aquí lo de infinito y automático:
if (i < max - 4) {
i = i + 4;
} else {
i = 0;
}En el experimento son 12 items a mostrar que se encuentran ocultos por defecto, si vemos por completo el código JavaScript veremos primero que hay un bloque de código que solo se ejecuta una vez que se encarga de activar los primeros 4 de manera automática sin necesidad de esperar los dos segundos y esto se debe a que son los primeros elementos de la lista que se muestran:
$("#c > li").eq(i).addClass('active').css('left', '0');
$("#c > li").eq(i + 1).addClass('active').css('left', '25%');
$("#c > li").eq(i + 2).addClass('active').css('left', '50%');
$("#c > li").eq(i + 3).addClass('active').css('left', '75%');El resto del JavaScript se ejecuta mediante un método setInterval de manera consecutiva cada dos segundos e infinito y que se encarga de procesar dos bloques de lista por vez, agregando transiciones a cada uno de los grupo de 4 listado definidos:
$("#c > li").eq(i).css('transition-delay', '0.25s');
$("#c > li").eq(i + 1).css('transition-delay', '0.5s');
$("#c > li").eq(i + 2).css('transition-delay', '0.75s');
$("#c > li").eq(i + 3).css('transition-delay', '1s');
...
$("#c > li").eq(i).css('left', '0').addClass('active').css('transition-delay', '1.25s');
$("#c > li").eq(i + 1).css('left', '25%').addClass('active').css('transition-delay', '1.5s');
$("#c > li").eq(i + 2).css('left', '50%').addClass('active').css('transition-delay', '1.75s');
$("#c > li").eq(i + 3).css('left', '75%').addClass('active').css('transition-delay', '2s');Como puedes ver, se establece un delay para cada uno de los ítems a mostrar para que se oculten de forma progresiva.
También se reinicia el contador debido a que son 4 items a mostrar por vez y de esta forma evitar desbordar el array:
if (i < max-4) {
i = i+4;
} else {
i = 0;
} El experimento original lo puedes encontrar en el siguiente enlace: Infinite Automatic Carousel.
Acepto recibir anuncios de interes sobre este Blog.
Se explica cómo crear una galería Fullscreen o pantalla completa con un menú fijo lateral con jQuery y CSS y también un Carrusel automático e infinito con jQuery y un poco de CSS.