Author: | Blobfolio |
---|---|
Views Total: | 842 views |
Official Page: | Go to website |
Last Update: | November 9, 2019 |
License: | MIT |
Preview:

Description:
The blob-slide library provides 2 methods to horizontally/vertically collapse and expand blocks of web contents with smooth transition effect.
How to use it:
Download and insert the blob-slide library into the html file.
<script src="blob-slide.js"></script>
Use blob-slide to create a vertically sliding nav menu.
<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' } ); });
Use blob-slide to create a horizontally sliding nav menu.
<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' } ); });
Possible options to customize the sliding effect.
{ // 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 }
Changelog:
11/09/2019
- fix: whitespace
06/24/2018
- change to var
06/17/2018
- Update