Versatile Sliding Box In JavaScript – slideBlock.js

Preview:

Description:

slideBlock.js is a JavaScript library that utilizes CSS3 animations to create animated panels sliding from the edge of the screen.

Ideal for sliding modal, sidebar navigation, sticky notification bar, EU Cookie notice banner, etc.

How to use it:

1. Add the slideBlock.js to the web page.

<link rel="stylesheet" href="css/slideBlock.css" />
<script src="js/slideBlock.js"></script>

2. Attach the slideBlock to a sliding box as follows.

<div class="slide-block" id="example">
  ... Any Content Here ...
</div>

const slidingBox = new slideBlock({
      elementID: 'example'
})

3. Determine from which direction the content will slide:

• slide-block–left
• slide-block–right
• slide-block–top
• slide-block–bottom
• slide-block–center

<div class="slide-block slide-block--left" id="example">
  ... Any Content Here ...
</div>

4. Determine whether to display a fullscreen overlay when activated. Default: false.

const slidingBox = new slideBlock({
      overlay: true,
      slideBlockOverlayHTML: `<div class="slide-block slide-block--overlay" id="slideBlockOverlay""></div>`
})

5. Enable an element to slide in/out the sliding box.

const slidingBox = new slideBlock({
      elementsActivateID: [],
      elementsDisableID: []
})

6. Determine whether to display the sliding box on page load. Default: false.

const slidingBox = new slideBlock({
      startMove: true
})

7. Determine the animation delay. Default: 500.

const slidingBox = new slideBlock({
      delayStart: 300
})

8. Slide in/out the box manually.

slidingBox.activateBlock()
slidingBox.disableBlock()

9. Create a modal window.

<div class="slide-block" id="slideBlockOverlay">
 <div class="slide-block slide-block--center" id="slideBlockModal">
   <div class="modal" id="modal">
      <div class="button" id="modalClose">
       <span class="button__text">Modal close</span>
     </div>
   </div>
 </div>
</div>

const slideBlockModal = new SlideBlock({
      elementID: 'slideBlockModal',
      overlay: true,
      elementsActivateID: ['modalOpen'],
      elementsDisableID: ['modalClose']
})

Changelog:

10/16/2020

• Bugfix