Easy Mobile Friendly HTML Presentation Plugin With jQuery - presentMe.js

presentMe.js is a simple, easy-to-use and mobile friendly plugin used for generating a beautiful, animated, step-based html presentation / page slider. Heavily based on CSS3 and GSAP's TweenMax.js.

How to use it:

1. Place jQuery library together with the PresentMe.js script and TweenMax.js into your html page.

<script src="js/TweenMax.js"></script>
<script src="js/jquery.js"></script>
<script src="js/presentMe.js"></script>

2. Divide your webpage into 4 parts:

• backgroundDiv controls the background of presentation
• control contains leftButton, rightButton as well as pause indicator (only when automaticExecution is enabled )
• main contains all the slides
• indicator shows the progress of slides

<div id="backgroundDiv"></div>
<div id="control"></div>
<div id="main"></div>
<div id="indicator"></div>

3. Use class="frame" in div to include a new slide in your presentation. These slides can be given an id and can be styled in your css file. You can customize all data-attributes. data-styleIn and data-styleOut attributes are optional which can have zoomOut or normal value. List of various data-from and data-to attributes is:

• left, right, down, up
• leftUp, leftDown, rightUp, rightDown
• above, beneath,
• zoomOut, zoomIn,
• rotateLeft, rotateRight, rotateUp, rotateDown

<div class="frame" data-from="rotateLeft" data-to="rotateRight">
  <h1>Frame 1</h1>
  ...
</div>

4. You can control slde-speed (default is 1s) or choose auto slide-show.

//time taken in incoming or outgoing of slides in ms
"inOutDuration" : 1000,

//duration of slide (ms) in case of automatic execution
"duration" : 4000,

//set this true if you want slide show
//note that in this case there will be automatic slideshow and you will not be able to control 
//next as well as previous slide
//however you can pause/play slides using space bar
"automaticExecution" : false

---

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