Alternar contenido horizontal y vertical-BLOB-Slide

Vista prévia

Descripción

La biblioteca de diapositivas de blobs proporciona 2 métodos para contraer y expandir horizontalmente y verticalmente los bloques de contenido web con un efecto de transición suave.

Funcionamiento

Descargue e inserte la biblioteca de diapositivas de blobs en el archivo HTML.

<script src="blob-slide.js"></script>

Utilice la diapositiva de blobs para crear un menú de navegación deslizante verticalmente.

<nav class="menu vmenu">

<a href="#" id="vmenu-toggle" class="item item--top">vslide()</a>

<a href="#" class="item item--toggle" hidden>One</a>

<a href="#" class="item item--toggle" hidden>Two</a>

<a href="#" class="item item--toggle" hidden>Three</a>

<a href="#" class="item item--toggle" hidden>Four</a>

<a href="#" class="item item--toggle" hidden>Five</a>
</nav>

document.getElementById('vmenu-toggle').addEventListener('click', function(e){

e.preventDefault();


blobSlide.vslide(


document.querySelectorAll('.vmenu .item--toggle'),


{ duration: 500, transition: 'ease' }

);
});

Utilice la diapositiva de blobs para crear un menú de navegación deslizante horizontalmente.

<nav class="menu hmenu">

<a href="#" id="hmenu-toggle" class="item item--top">hslide()</a>

<a href="#" class="item item--toggle" hidden>One</a>

<a href="#" class="item item--toggle" hidden>Two</a>

<a href="#" class="item item--toggle" hidden>Three</a>

<a href="#" class="item item--toggle" hidden>Four</a>

<a href="#" class="item item--toggle" hidden>Five</a>
</nav>

document.getElementById('hmenu-toggle').addEventListener('click', function(e){

e.preventDefault();


blobSlide.hslide(


document.querySelectorAll('.hmenu .item--toggle'),


{ duration: 500, transition: 'ease' }

);
});

Posibles opciones para personalizar el efecto deslizante.

{


 // display type

display: "block"


// in milliseconds

duration: 100,


 /*


linear


ease


easeInQuad


easeOutQuad


easeInOutQuad


easeInCubic


easeOutCubic


easeInOutCubic


easeInQuart


easeOutQuart


easeInOutQuart


easeInQuint


easeOutQuint


easeInOutQuint

*/

transition: 'linear',


// "show" or "hide"

force: null


}

Registro de cambios

06/24/2018

• cambiar a var

06/17/2018

• actualizar