BookBlock y Windy: 2 jQuery-Plugins brindan una navegación de contenido excepcional

Lo más probable es que no esté buscando controles deslizantes, debe vigilar sus pasos para evitar no pisotearlos. Hay más controles deslizantes en este planeta que contenido para que ellos los cuiden. Siendo este el caso, ¿por qué presentamos dos variantes más a nuestros lectores? Es simple. BookBlock y Windy, los nuevos jquery-plugins de Codrops, son extraordinarios, totalmente frescos y nuevos en su enfoque. Ofrecen una variedad de efectos emocionantes para que presente su contenido de formas nunca antes vistas. Estoy impresionado. Ambos complementos de Codrops use las propiedades CSS para crear efectos de animación. El marcado se realiza con HTML, que el complemento recoge y mueve en forma y movimiento.

Cambio de contenido con BookBlock

Flip-Page de BookBlock

LibroBloque es un complemento para presentar contenido en forma de libro imitando su comportamiento. El efecto se llama flip-page y debería hablar por sí mismo. La navegación es paginar a través del contenido similar a un libro. CSS3 se utiliza para los efectos de volteo animados. El contenido y la navegación se marcan individualmente mediante HTML. De esa manera puedes diseñar ambos elementos por separado. Un elemento DIV lleva el contenido:

  

    
  

    
  …

Cada página del folleto tiene un contenedor por la clase de bb-item. Además, debemos proporcionar dos enlaces con ID individuales para fines de navegación:

next
previous

Ahora aplicamos la funcionalidad del plugin. Es imprescindible asignar los ID:

$(function() {
  $("#bb-bookblock").bookblock({
    nextEl: "#bb-nav-next",
    prevEl: "#bb-nav-prev"
  });
});

Hay más opciones para jugar. Puede configurar la velocidad de la animación y la sombra paralela para el efecto de volteo.

Contenido rápido con Windy

Contenido rápido con Windy

Ventoso presenta cada contenido como una sola hoja de papel, que luego se borra con el uso de la navegación, de modo que la hoja subyacente se vuelve visible. El efecto visual se asemeja a una baraja de cartas olvidadas afuera durante una tormenta menor. Las cartas vuelan una por una. El enfoque para iniciar los efectos es similar al de BookBlock:

• 
• 

…

Nuevamente asignamos el complemento:

$("#wi-el").windy();

La definición de la navegación funciona de forma idéntica a BookBlock. Con Windy también puede realizar un control deslizante, lo que no puede hacer con BookBlock:

Para que esto funcione, el contenedor debe estar equipado con la función slider proporcionado por jQuery UI:

$("#slider").slider({
  animate : true,
  min: 0,
  max: windy.getItemsCount() - 1,
  slide: function(event, ui) {
    windy.navigate(ui.value);
  }
});

Ambos complementos se basan en jQuery (la navegación deslizante necesita jQuery UI). BookBlock y Windy c están disponibles como descargas gratuitas, completas con ejemplos y archivos CSS adjuntos. Como el diseño se define mediante el uso de CSS, puede personalizarlo fácil y completamente según sus imaginaciones.

(dpe)