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

Animación Torus solo con HTML y CSS

Animación Torus solo con HTML y CSS

Corazón con CSS

Corazón con CSS

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

Cómo crear una tabla con resaltado en columnas y filas (vertical y horizontal)

En esta entrada veremos cómo crear una tabla sencilla con resaltados (highlight) sobre las celdas seleccionadas horizontal y verticalmente (columnas y filas).

Andrés Cruz 05-05-2016

Como mostrar contenido en columnas expandibles con solo CSS

Como mostrar contenido en columnas expandibles con solo CSS

En este artículo veremos una forma de mostrar contenido a través de columnas expansibles.

Andrés Cruz 21-07-2014

4 formas de pintar mapas con jQuery y JavaScript

4 formas de pintar mapas con jQuery y JavaScript

Se muestran 4 plugins de pago/gratuitos para dibujar mapas vectorizados con HTML nativo en nuestra web a través de jQuery.

Andrés Cruz 25-04-2016