|File Size:||9.87 KB|
|Official Website:||Go to website|
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>
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-styleOut attributes are optional which can have
zoomOut or normal value. List of various
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