Easy Dynamic Presentation Plugin In jQuery - Presentation.js

Presentation is the new trend. Whether it's to pitch an idea, display your work, or simply update stakeholders on the status of your project, we all have reasons to give presentations. 

This is a jQuery-powered presentation plugin that allows users to create better professional-looking presentations, with awesome jQuery and/or CSS 3 animations. Have fun with it.

How to use it:

1. Load the jQuery presentation plugin's files in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Presentation CSS -->
<link rel="stylesheet" href="css/presentation.css" />
<!-- Presentation js -->
<script src="js/presentation.js"></script>

2. Load the Animate.css library for cool CSS3 animations.

<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Presentation CSS -->
<link rel="stylesheet" href="css/presentation.css" />
<!-- Presentation js -->
<script src="js/presentation.js"></script>

3. Create a container to hold your presentation.

<div id="presentationExample"></div>

4. Add slides to the presentation (an array of objects).

var data = [{
    // ************************ Slide 1 ************************
    //  HTML:
    //  <h1 class="companyName">Your Company Name</h1>
    //  below CSS styles apply to <h1>:
    //  #presentationDiv .slide * { position: absolute; font-weight: 300; margin: 0; padding: 0; }
    //  .companyName { left: 100px; top: -60px; }
    //  after 1 second HTML will be <h1 class="companyName" style="top: 150px">Your Company Name</h1>
    //  after 9 seconds HTML will be <h1 class="companyName" style="top: 150px; opacity: 0;">Your Company Name</h1>
    name: 'h1', // <h1></h1>
    content: "Your Company Name", // <h1>Your Company Name</h1>
    attr: { // <h1 class="companyName">Your Company Name</h1>
      'class': 'companyName'
    },
    animation: ['top', 150, 500, 1000], // 1st and 2nd proparties are style {top: 150px; } and 3rd is a animaton speed "0.5 second" and 4th is time duration "1 second". So after 1 second <h1> has this animation and it will appear in the presentation
    cssEffect: { // after 1 second <h1> has flipInY css effect
      type: 'flipInY', // CSS effect
      time: 1000 // time duration
    },
    afterAnimation: ['opacity', 0, 1000, 9000] // 1st and 2nd proparties are style {opacity: 0; } and 3rd is a animaton speed "1 second" and 4th is time duration "9 second". So after 9 second <h1> has this animation and it will hide from the presentation
    }, {
    name: 'img',
    attr: {
      'src': 'images/chrome.png',
      'class': 'chrome'
    },
    animation: ['bottom', 266, 1000, 5000],
    cssEffect: {
      type: 'flip',
      time: 5000
    },
    afterAnimation: ['opacity', 0, 1000, 9000]
    },
    // more slides here
]

5. Initialize the plugin on the presentation container. Done.

$('#presentationDiv').jPresentation({
  'data': data
});

6. Set the text to be displayed in the Start Button.

$('#presentationDiv').jPresentation({
  'startButtonText': "Start Presentation",
});

---

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