jQuery Plugin To Create Amazing Presentations - mb.disclose

mb.disclose is an awesome jQuery plugin that provides an amazing way to present Html contents in carousel like presentations. You can customize the CSS3 powered animations for each Html element using Html5 data-* attributes.

Another DEMO to learn more about the plugin.

Basic usages:

1. Load jQuery library and the jQuery.mb.disclose plugin in the Html page.

<link href="css/mb.disclose.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="inc/jquery.mb.disclose.js"></script>

2. Create the Html for a dots navigation.

<div id="slideIndex"></div>

3. Create the presentations and use data-* attributes to customize the animations for Html element inside a slide.

• data-animationin
• data-animationout
• data-time
• data-onenter
• data-onexit
• data-stop
• data-animate
• data-animationstart
• data-animationend
• data-animationtime
• data-animationdelay
• data-ease

<div id="mbCarousel">

  <div id="banner1" class="banner"
    data-animationin='{"top":"-100%", "opacity":0}'
    data-animationout='{"top":"-100%", "opacity":1}'
    data-time="10000">

    <h2 data-animate=true
      data-animationstart='{"font-size":"60px", "top":-100, "opacity":0, "color":"black"}'
      data-animationend='{"font-size":"120px", "top":0, "opacity":1, "color":"black"}'
      data-animationtime=500
      data-animationdelay='500'>... What is this?</h2>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-bottom":-600, "opacity":0, "color":"black"}'
      data-animationend='{"margin-bottom":-30, "opacity":1, "color":"white"}'
      data-animationtime=3000>
    <p>Content 1</p>
    
    </div>
  </div>

  <div id="banner2" class="banner"
    data-animationin='{"left":"-100%", "opacity":0}'
    data-animationout='{"left":"100%", "opacity":0}'>

    <h2 data-animate=true
      data-animationstart='{"margin-left":-200, "opacity":0}'
      data-animationend='{"margin-left":0, "opacity":1}'
      data-animationdelay='500'>Banner 2 Title</h2>

    <img src="elements/COLOUR10.png"
      data-animate=true
      data-animationdelay='800'>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-right":-600, "opacity":0}'
      data-animationend='{"margin-right":0, "opacity":1}'
      data-animationdelay='1000'>
    <p>Content 2</p>
    </div>
  </div>

  <div id="banner3" class="banner"
    data-animationin='{"top":"-500", "opacity":0}'
    data-animationout='{"top":"0", "opacity":0}'>

    <h2 data-animate=true
      data-animationstart='{"top":-200, "opacity":0}'
      data-animationend='{"top":20, "opacity":1}'
      data-animationdelay='800'>Banner 3 Title</h2>

    <img src="1.png"
      data-animate=true
      data-animationstart='{"left":-500, "opacity":0}'
      data-animationend='{"left":0, "opacity":1}'
      data-animationdelay='800'>

    <div class="bannerText"
      data-animate=true
      data-animationstart='{"margin-bottom":-600, "opacity":0, "color":"black"}'
      data-animationend='{"margin-bottom":0, "opacity":1, "color":"white"}'
      data-animationdelay='400'>
    <p> Content 3</p>
    </div>
  </div>

</div>

4. Call the plugin to enable the presentations.

$("#mbCarousel").disclose();

5. Available options and defaults.

slideIntervall:5000,
inTimer:600,
outTimer:1000,
ease:"bezier(.24,.85,.32,.92)",
animationIn:{left:"100%", top:0, opacity:1},
animationOut:{left:"-100%", top:0, opacity:1},
autoPlay:false,
stopOnHover:true,
activateKeyboard:true,
indexPlaceHolder:"#slideIndex",
progressPlaceHolder:"#slideProgress",
onEnter:function(el, $el, $newEl){},
onExit:function(el, $el, $newEl){},
onInit:function(el){}

Changelog:

2019-08-24

• JS update

2016-06-08

• Bugfix

2015-03-15

• Various updates

---

This awesome jQuery plugin is developed by pupunzi. For more Advanced Usages, please check the demo page or visit the official website.