Carrusel fullscreen con menú lateral con jQuery y CSS

Ver ejemplo Descargar

En esta entrada explicaremos como crear un carrusel 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 carrusel en general este tipo de carrusel 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");
   }                   
});

Puedes consultar el código original del experimento en el siguiente enlace:5 Beautiful Image Effects With CSS Shapes and Filters.

Ver ejemplo Descargar

jQuery

Galería

JavaScript

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy