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

Features of Pure CSS Background Image Slideshow / No JavaScript

How to make use of it:

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

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

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

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

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

3. Determine from which course the content will slide:

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

4. Determine whether or not to display a fullscreen overlay when activated.

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

5. Enable a component to slide in/out the sliding box.

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

6. Determine whether or not to display the sliding box on the web page load.

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

7. Determine the animation delay.

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']
})

Versatile Sliding Box, SlideBlock JS Plugin/Github

See Demo And Download

Official Website(leobrn): Click Here

This superior jQuery/javascript plugin is developed by leobrn. For extra Advanced usage, please go to the official website.