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

Easy Mobile Friendly HTML Presentation Plugin With jQuery - presentMe.js
File Size: 9.87 KB
Views Total: 1243
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.