jQuery Presentation

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

• Some examples of name
• name: 'h1' (This is for a <h1>)
• name: 'p' (This is for a <p>)
• name: 'img' (This is for a <img>)
• name: 'div' (This is for a <div>)
• name: 'span' (This is for a <span>)

content
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>

attr
{ '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.

• Some examples of attr
• attr: { 'src': 'images/chrome.png', 'class': 'chrome' } (This is for a image, apply src and class)
• attr: { 'class': 'aboutUs center fullWidth' } (multiple classes apply to a HTML tag)

animation
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
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
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).

• Some examples of cssEffect
• cssEffect: { type: 'rotateInUpLeft', time: 3000 } ('rotateInUpLeft' CSS effect will apply to a HTML tag after 3 seconds of clicking a start button)
• cssEffect: { type: 'flip', time: 5000 } ('flip' CSS effect will apply to a HTML tag after 5 seconds of clicking a start button)
• cssEffect: { type: 'rotateInUpRight', time: 7000 } ('rotateInUpRight' CSS effect will apply to a HTML tag after 7 seconds of clicking a start button)
• cssEffect: { type: 'flipInY', time: 11000 } ('flipInY' CSS effect will apply to a HTML tag after 11 seconds of clicking a start button)
• cssEffect: { type: 'pulse', time: 21000 } ('pulse' CSS effect will apply to a HTML tag after 21 seconds of clicking a start button)

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).

        $('#presentationDiv').jPresentation({
            '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.