jQuery Presentation

Email: tarakpatel18@gmail.com

If you have any questions that are beyond the scope of this help file, please contact me on the above email address.

Table of Contents

  1. About Plugin
  2. Features
  3. Customization
  4. Sources and Credits

A) About Plugin - top

Using this plugin, you can create stunning presentations on the web.
This plugin has awesome CSS effects, jQuery animation options, and documentation.

B) Features - top

  1. Create presentations on the web
  2. Awesome CSS effects & jQuery animation options
  3. Stop and restart options
  4. 6 months of support

C) Customization - top

As a first step, you have to create a data (array) containing the details of each HTML tag which will be displayed in the presentation.
Once we click a start button data will be converted to HTML and HTML tags will show/hide in a presentation one by one with animation.

We have to define name, content, attr, animation, cssEffect, and afterAnimation for each HTML tag.

Here is a simple understanding of the data and an explanation of each option.

        name: 'h1',
        content: "Your Company Name",
        attr: {
            'class': 'companyName'
        animation: ['top', 150, 500, 1000],
        cssEffect: {
            type: 'flipInY',
            time: 1000
        afterAnimation: ['opacity', 0, 1000, 9000]

name: 'h1'
This option is to define the name of the tag. In the sample data, it is <h1></h1>.

content: "Your Company Name"
This option is to define the content of the tag. In the sample data, it is <h1>Your Company Name</h1>

{ 'class': 'companyName' }
This option is to define the attributes of the tag. In the sample data, it is <h1 class="companyName">Your Company Name</h1>
You can also apply multiple attributes.

animation: ['top', 150, 500, 1000]
This animation is same as jQuery animate() method. Click here to read more information about it jQuery animate() Method OR .animate()
This option has 4 parameters, first 3 are same as jQuery animate() parameters, 1st and 2nd are for CSS style (in a sample data it is top: '150px') and 3rd is animation speed (in a sample data it is 0.5 second).
4th is a time duration, it means after this defined time duration <h1> will have this animation.
In above sample data, you can see that <h1> tag has a class companyName and .companyName has CSS properties { position: absolute; top: -60px; } in a CSS file so by default, it will not display in a presentation because it has -60px for top.
but after 1 second of clicking a start button <h1> will appear with animation in a presentation and after animation <h1> has top: 150px; property in a style attributes.
['top', 150, 500, 1000],
'top' and 150 it's CSS propertie/value { top: '150px'; }
500 is animation speed (0.5 second)
1000 is time duration (1 second)

afterAnimation: ['opacity', 0, 1000, 9000]
This is same as animation. no difference.
But animation is used to show an HTML tag in a presentation and afterAnimation is used to hide an HTML tag in the presentation once the HTML tag is already presented.
In above sample data, afterAnimation is used for hide <h1>, so after 9 second of clicking a start button <h1> will disappear with animation and after animation <h1> has opacity: 0; property in a style attribute.

cssEffect: { type: 'flipInY', time: 1000 }
Please click here to check out the various CSS effects on Animate.css http://daneden.me/animate
I created this option based on these CSS effects. This option has 2 properties type and time. Type refers to CSS effects and time is a time duration (same as animation and afterAnimation).

Apart from this there are some other things you need to know.

startButtonText: by using this option you can update start button text (Check out the code below for how to define it).

            'startButtonText': 'Type your text here...',
            'data': data

Also, when you create a data array, you need to write the following code so, after a defined time duration, a presentation will be over.

            name: 'over',
            time: 46500

After reading all the items here check the data array from index.html so you can understand how it works.

D) Sources and Credits - top

  1. Daniel Eden for Animate.css http://daneden.me/animate
  2. Icon Finder
  3. Google Search and Google Translate

As I said at the beginning, I'd be glad to help you if you have any questions relating to this plugin. I'll do my best to assist.

Thank you