DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
18-05-2017

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 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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

InstaStream: plugin para mostrar imágenes desde Instagram

InstaStream: plugin para mostrar imágenes desde Instagram

Ley del cuadrado inverso con CSS

Ley del cuadrado inverso con CSS

Css3 Spinners

Css3 Spinners

Algunos artículos que te pueden interesar

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Dando los primeros pasos con FlexBox: La caja flexible con CSS3

Con la propiedad FlexBox podemos construir cajas flexibles, fluidas y adaptables con distintos tamaños y que sean adaptables facilmente a la resolución del dispositivo.

Andrés Cruz 22-09-2014

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

El filtro Blur (desenfoque) en CSS y alguno de sus posibles usos

Con solo CSS podemos crear efectos sobre nuestros elementos HTML bastantes complejos sin la necesidad de utilizar Photoshop o Gimp.

Andrés Cruz 20-01-2014

Triángulo con fondo animado con CSS

Triángulo con fondo animado con CSS

Se explica cómo crear un triángulo con un fondo animado con un poco de CSS, HTML vectorial y una imagen.

Andrés Cruz 19-12-2016