PARALLAX SLIDER - CLASSIC

Thank you for purchasing our product!

 

 

Files Structure

css file

The product uses parallax_classic.css file which contains the skin and texts classes

skins folder

The images used by the skins are located in this folder and distributed in subfolders with the skin name.

js folder

All the .js files are located in this folder. The product uses jquery. The product is generated by parallax_classic.js

images folder

We put all the images in this folder. If needed, you can use a different one.

html files

For your convenience we've created for each skin a .html file. In each file you'll find all the necessary code for implementation for each skin.

 

 

 

HTML/JS code for implementation

Step 1: Copy on your server/project the following files and folders: images, js, skins, parallax_classic.css. Of course you can move the files in other folders, but you'll take care to correct the paths to the files
Step 2: Open the .html file associated with the skin you want to use. For example, if you want to use "bullets" skin open bullets.html
Step 3: Put the below code in the <head> section of your file. This code has to be copied from the <head> section of the file you opened (EX: bullets.html) to assure you include the skin correctly.

<!-- must have -->
<link href="parallax_classic.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/jquery.ui.touch-punch.min.js" type="text/javascript"></script>
<script src="js/parallax_classic.js" type="text/javascript"></script>
<!-- must have -->

 

<script>
jQuery(function() {

jQuery('#parallax_classic_bullets').parallax_classic({
skin: 'bullets',
width: 940,
height: 364,
defaultEasing:'easeOutElastic',
autoPlay:14,
responsive:true,
autoHideBottomNav:false,
showPreviewThumbs:true,
autoHideNavArrows:true,
showCircleTimer:true,
myloaderTime:6,
scrollSlideDuration:1.8,
scrollSlideEasing:'easeInQuint',
thumbsWrapperMarginBottom:-45
});


});
</script>

Step 4: In the <body> section copy the code below. This code has to be copied from the <body> section of the file you opened (EX: bullets.html) to assure you include the skin correctly.

<div id="parallax_classic_bullets">
<div class="myloader"></div>

<!-- CONTENT -->
<ul class="parallax_classic_list">
<li data-text-id="#parallax_classic_photoText1" data-link="http://codecanyon.net/user/LambertGroup" data-bottom-thumb="images/bullets/thumbs/01_bullets.jpg">
<img src="images/bullets/01_bullets.jpg" width="940" height="364" alt="" />
</li>
<li data-text-id="#parallax_classic_photoText2" data-link="http://codecanyon.net/user/LambertGroup" data-bottom-thumb="images/bullets/thumbs/02_bullets.jpg">
<img src="images/bullets/02_bullets.jpg" width="940" height="364" alt="" />
</li>

<li data-text-id="#parallax_classic_photoText3" data-bottom-thumb="images/bullets/thumbs/03_bullets.jpg">
<img src="images/bullets/03_bullets.jpg" width="940" height="364" alt="" />
</li>

</ul>




<!-- TEXTS -->

<div id="parallax_classic_photoText1" class="parallax_classic_texts">
<div class="parallax_classic_text_line textElement10_bullets" data-initial-left="619" data-initial-top="320" data-final-left="619" data-final-top="0" data-duration="0.9" data-fade-start="0" data-delay="3.9" data-easing="easeOutElastic" data-exit-left="619" data-exit-top="-248" data-exit-duration="1.5" data-exit-delay="1.0"></div>
<div class="parallax_classic_text_line textElement11_bullets" data-initial-left="635" data-initial-top="240" data-final-left="635" data-final-top="21" data-duration="1.5" data-fade-start="0" data-delay="4.2" data-easing="easeOutElastic" data-exit-left="635" data-exit-top="-248" data-exit-duration="1.5" data-exit-delay="0.2">No Limit...</div>
<div class="parallax_classic_text_line textElement12_bullets" data-initial-left="740" data-initial-top="60" data-final-left="635" data-final-top="60" data-duration="1.5" data-fade-start="0" data-delay="4.2" data-easing="swing" data-exit-left="635" data-exit-top="-248" data-exit-duration="1.5" data-exit-delay="0.5">for imagination. Just play with parallax effect and create something new every time.</div>

<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="0" data-final-left="0" data-final-top="248" data-duration="0.7" data-fade-start="0" data-delay="1.5" data-easing="easeOutElastic" data-exit-left="-280" data-exit-top="248" data-exit-duration="1.5" data-exit-delay="0.2"><img src="images/bullets/carpet.png" width="656" height="155" alt=""/></div>

<div class="parallax_classic_text_line" data-initial-left="-30" data-initial-top="145" data-final-left="33" data-final-top="138" data-duration="0.7" data-fade-start="0" data-delay="0.5" data-easing="swing" data-exit-left="-280" data-exit-top="138" data-exit-duration="1.5" data-exit-delay="0.2"><img src="images/bullets/chair.png" width="205" height="124" alt=""/></div>

<div class="parallax_classic_text_line" data-initial-left="700" data-initial-top="163" data-final-left="263" data-final-top="143" data-duration="0.5" data-fade-start="0" data-delay="1.9" data-easing="swing" data-exit-left="0" data-exit-top="143" data-exit-duration="1.0" data-exit-delay="0.8"><img src="images/bullets/sofa.png" width="560" height="174" alt=""/></div>

<div class="parallax_classic_text_line" data-initial-left="450" data-initial-top="0" data-final-left="450" data-final-top="160" data-duration="0.7" data-fade-start="0" data-delay="2.8" data-easing="easeOutBounce" data-exit-left="230" data-exit-top="160" data-exit-duration="1.0" data-exit-delay="0.8"><img src="images/bullets/pillows.png" width="111" height="51" alt=""/></div>

<div class="parallax_classic_text_line" data-initial-left="900" data-initial-top="42" data-final-left="196" data-final-top="37" data-duration="0.6" data-fade-start="0" data-delay="3.4" data-easing="swing" data-exit-left="-200" data-exit-top="37" data-exit-duration="2.5" data-exit-delay="0.5"><img src="images/bullets/cello.png" width="450" height="330" alt=""/></div>

<div class="parallax_classic_text_line textElement11_bullets" data-initial-left="775" data-initial-top="240" data-final-left="775" data-final-top="134" data-duration="0.9" data-fade-start="0" data-delay="4.5" data-easing="easeOutElastic" data-exit-left="775" data-exit-top="634" data-exit-duration="1.5" data-exit-delay="0.8"><a href="http://codecanyon.net/user/LambertGroup/portfolio" target="_blank">GO!</a></div>
</div><!-- End photoText1 -->



<div id="parallax_classic_photoText2" class="parallax_classic_texts">
<div class="parallax_classic_text_line textElement20_bullets" data-initial-left="0" data-initial-top="320" data-final-left="0" data-final-top="20" data-duration="1.5" data-fade-start="0" data-delay="5.0" data-exit-left="0" data-exit-top="654" data-exit-duration="1.5" data-exit-delay="0.5"></div>
<div class="parallax_classic_text_line textElement21_bullets" data-initial-left="590" data-initial-top="28" data-final-left="25" data-final-top="28" data-duration="1.0" data-fade-start="0" data-delay="5.5" data-easing="easeOutElastic" data-exit-left="25" data-exit-top="-354" data-exit-duration="1.5" data-exit-delay="0.2">Multiple Layers</div>
<div class="parallax_classic_text_line" data-initial-left="200" data-initial-top="20" data-final-left="560" data-final-top="20" data-duration="0.9" data-fade-start="0" data-delay="2.7" data-easing="swing" data-exit-left="560" data-exit-top="20" data-exit-duration="1.5" data-exit-delay="2.0"><img src="images/bullets/man.png" width="295" height="346" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="690" data-initial-top="41" data-final-left="690" data-final-top="41" data-duration="0.3" data-fade-start="0" data-delay="4.3" data-easing="swing" data-exit-left="690" data-exit-top="41" data-exit-duration="1.5" data-exit-delay="2.0"><img src="images/bullets/womanShadow.png" width="50" height="197" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="920" data-initial-top="33" data-final-left="694" data-final-top="33" data-duration="0.9" data-fade-start="0" data-delay="3.5" data-easing="swing" data-exit-left="694" data-exit-top="33" data-exit-duration="1.5" data-exit-delay="2.0"><img src="images/bullets/woman.png" width="119" height="311" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="737" data-initial-top="106" data-final-left="737" data-final-top="106" data-duration="0.6" data-fade-start="0" data-delay="4.5" data-easing="swing" data-exit-left="737" data-exit-top="106" data-exit-duration="1.5" data-exit-delay="2.0"><img src="images/bullets/hand.png" width="32" height="37" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="-30" data-initial-top="150" data-final-left="100" data-final-top="150" data-duration="0.9" data-fade-start="0" data-delay="0.5" data-easing="swing" data-exit-left="-300" data-exit-top="150" data-exit-duration="2.5" data-exit-delay="0.8"><img src="images/bullets/blackCar.png" width="495" height="212" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="353" data-initial-top="180" data-final-left="353" data-final-top="180" data-duration="0.4" data-fade-start="0" data-delay="1.8" data-easing="swing"><img src="images/bullets/lights.png" width="469" height="102" alt=""/></div>
</div><!-- End photoText2 -->


<div id="parallax_classic_photoText3" class="parallax_classic_texts">
<div class="parallax_classic_text_line" data-initial-left="151" data-initial-top="310" data-final-left="151" data-final-top="310" data-duration="0.7" data-fade-start="0" data-delay="1.6" data-easing="swing" data-exit-left="-120" data-exit-top="310" data-exit-duration="1.5" data-exit-delay="0.5"><img src="images/bullets/04_3shadow.png" width="194" height="36" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="400" data-initial-top="67" data-final-left="287" data-final-top="67" data-duration="0.9" data-fade-start="0" data-delay="1.4" data-easing="easeOutElastic" data-exit-left="0" data-exit-top="67" data-exit-duration="1.5" data-exit-delay="0.5"><img src="images/bullets/04_3.png" width="63" height="255" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="310" data-final-left="0" data-final-top="310" data-duration="0.7" data-fade-start="0" data-delay="0.7" data-easing="swing" data-exit-left="-150" data-exit-top="310" data-exit-duration="1.5" data-exit-delay="0.3"><img src="images/bullets/04_1shadow.png" width="247" height="42" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="43" data-final-left="146" data-final-top="43" data-duration="0.4" data-fade-start="0" data-delay="0.5" data-easing="swing" data-exit-left="0" data-exit-top="43" data-exit-duration="1.5" data-exit-delay="0.3"><img src="images/bullets/04_1.png" width="119" height="288" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="329" data-final-left="0" data-final-top="329" data-duration="0.7" data-fade-start="0" data-delay="1.0" data-easing="swing" data-exit-left="-310" data-exit-top="329" data-exit-duration="1.5" data-exit-delay="0.5"><img src="images/bullets/04_2shadow.png" width="284" height="52" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="102" data-final-left="221" data-final-top="102" data-duration="0.4" data-fade-start="0" data-delay="0.9" data-easing="swing" data-exit-left="0" data-exit-top="102" data-exit-duration="1.5" data-exit-delay="0.5"><img src="images/bullets/04_2.png" width="78" height="244" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="334" data-final-left="0" data-final-top="334" data-duration="0.7" data-fade-start="0" data-delay="2.0" data-easing="swing" data-exit-left="-70" data-exit-top="334" data-exit-duration="1.5" data-exit-delay="0.15"><img src="images/bullets/04_4shadow.png" width="154" height="30" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="0" data-initial-top="33" data-final-left="122" data-final-top="33" data-duration="0.9" data-fade-start="0" data-delay="1.8" data-easing="easeOutElastic" data-exit-left="0" data-exit-top="33" data-exit-duration="1.5" data-exit-delay="0.15"><img src="images/bullets/04_4.png" width="85" height="323" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="260" data-initial-top="334" data-final-left="260" data-final-top="334" data-duration="0.7" data-fade-start="0" data-delay="2.4" data-easing="swing" data-exit-left="-82" data-exit-top="334" data-exit-duration="1.5" data-exit-delay="0.0"><img src="images/bullets/04_5shadow.png" width="193" height="32" alt=""/></div>
<div class="parallax_classic_text_line" data-initial-left="338" data-initial-top="-50" data-final-left="338" data-final-top="22" data-duration="0.9" data-fade-start="0" data-delay="2.2" data-easing="easeOutElastic" data-exit-left="0" data-exit-top="22" data-exit-duration="1.5" data-exit-delay="0.0"><img src="images/bullets/04_5.png" width="119" height="326" alt=""/></div>
<div class="parallax_classic_text_line textElement31_bullets" data-initial-left="0" data-initial-top="130" data-final-left="538" data-final-top="130" data-duration="0.5" data-fade-start="0" data-delay="2.6" data-easing="swing" data-exit-left="200" data-exit-top="130" data-exit-duration="1.5" data-exit-delay="0.2">Parallax</div>
<div class="parallax_classic_text_line textElement32_bullets" data-initial-left="540" data-initial-top="0" data-final-left="540" data-final-top="91" data-duration="1.1" data-fade-start="0" data-delay="3.3" data-easing="easeOutBounce" data-exit-left="540" data-exit-top="-330" data-exit-duration="1.5" data-exit-delay="0.5">Let's have a</div>
<div class="parallax_classic_text_line textElement32_bullets" data-initial-left="540" data-initial-top="330" data-final-left="540" data-final-top="193" data-duration="1.3" data-fade-start="0" data-delay="3.7" data-easing="easeOutBounce" data-exit-left="540" data-exit-top="530" data-exit-duration="1.5" data-exit-delay="0.5"><span style="text-transform:uppercase;">beach PARTY !</span></div>
</div> <!-- End photoText3 -->


</div>

 

 

 

JS Options

Attribute Default Value Description
General settings
skin 'bullets' Possible values:
- bullets
- thumbs
responsive
 false Possible values:
true - the banner will responsive
false - the banner will not be responsive
responsiveRelativeToBrowser true Possible values:
true - the banner will be responisve relatively to browser dimensions
false - the banner will be responisve relatively to parent div
width 918 banner width
height 382 banner height
width100Proc false Possible values:
true - the banner width will be 100%
false - the banner width will be what you've set for 'width' parameter
autoPlay 7 You can define the time (in seconds) until the next content will play. If you set it 0 the banner will not autoplay
loop true Possible values:
true - the banner will loop when reaches the end
false - the banner will stop when reaches the end
target '_blank'

Possible values:
'_blank' - the link associated to the primary photo will open in a new window
'_slef'- the link associated to the primary photo will open in the same window

*** If needed, for each element you can set particular target, usind 'data-target' parameter. Please refer to Banner Content Definition section
absUrl   The url to the skins folder.
scrollSlideDuration 0.8 Time to make the transition/animation from one slide to another
scrollSlideEasing 'easeOutQuad' The animation (from one slide to another) easing. Possible values:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce
defaultEasing 'swing' The defaut easing for layer animation. By layer, we understand a text or an image which comes over the main image. Possible values:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

*** If needed, for each element you can set particular easing, usind 'data-easing' parameter. Please refer to Layer/Text Animation section
NOTE: if you want to see the exit move, we recommend these values:
scrollSlideDuration:1.8,
scrollSlideEasing:'easeInQuint',
myloaderTime 4

the delay time (in seconds) to postpone the slider start. In this time, a rotating cicle will appear in the middle of the slider to signal that the slider is in loading status


NOTE: to gain time when you are testing your slider, because the slider is already in cache, set myloaderTime:0.
pauseOnMouseOver true Possible values:
true - enables autoPlay pause on mouse over
false - disables autoPlay pause on mouse over
enableTouchScreen true Possible values:
true - mobile touch screen support enabled
false - mobile touch screen support disabled
     
Default Values For Layers Exit Move
defaultExitLeft 0

the default left position, for layer exit (in pixels)

*** If needed, for each element you can set particular exit left, usind 'data-exit-left' parameter. Please refer to Layer/Text Animation section
defaultExitTop 0

the default top position, for layer exit (in pixels)

*** If needed, for each element you can set particular exit top, usind 'data-exit-top' parameter. Please refer to Layer/Text Animation section
defaultExitDuration 0

the default duration, for layer exit (in seconds)

*** If needed, for each element you can set particular exit duratio, usind 'data-exit-duration' parameter. Please refer to Layer/Text Animation section
defaultExitDelay 0

the default time delay, for layer exit (in seconds)

*** If needed, for each element you can set particular exit delay, usind 'data-exit-delay' parameter. Please refer to Layer/Text Animation section
defaultExitEasing 'swing'

the default easing, for layer exit (in pixels)
Possible values:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

*** If needed, for each element you can set particular exit easing, usind 'data-exit-easing' parameter. Please refer to Layer/Text Animation section
defaultExitOFF false

Possible values:
true - the layers will not exit
false - the layers will exit and according to exit left, top, delay, duration and easing value

*** If needed, for each element you can set particular exit OFF, usind 'data-exit-off' parameter. Please refer to Layer/Text Animation section
     
Controllers Settings
showAllControllers true Possible values:
true - all controllers will appear (next, previous, bottom navigation)
false - all controllers will not appear (next, previous, bottom navigation)
showNavArrows true Possible values:
true - next, previous buttons will appear
false - next, previous buttons will not appear
showOnInitNavArrows true Possible values:
true - next, previous buttons will appear on first banner init
false - next, previous buttons will not appear on first banner init
autoHideNavArrows true Possible values:
true - next, previous buttons will hide when mouse out
false - next, previous buttons will not hide when mouse out
showBottomNav true Possible values:
true - bottom navigation buttons will appear
false -bottom navigation buttons will not appear
showOnInitBottomNav true Possible values:
true - bottom navigation buttons will appear on first banner init
false - bottom navigations buttons will not appear on first banner init
autoHideBottomNav true Possible values:
true -bottom navigations buttons will hide when mouse out
false - bottom navigations buttons will not hide when mouse out
showPreviewThumbs true Possible values:
true - a preview image will appear on hovering each bottom button
false - the preview image will not appear on hovering each bottom button
numberOfThumbsPerScreen 0 the number of thumbs per screen. If you set it to 0, it will be calculated automatically. You can set a fixed number, for example 4
thumbsWrapperMarginBottom 0 the vertical pozition of the bottom navigation area
thumbsOnMarginTop 10 for the thumbs that are on, there is an arrow pointing the active thumb. Using this parameter you can change the vertical position of this arrow
     
Circle Timer Settings
showCircleTimer true Possible values:
true - shows the circle timer
false - hides the circle timer
circleRadius 10 circle radius
circleLineWidth 4 circle line width
circleColor "#FF0000" circle color, in hexa
circleAlpha 100 circle alpha, in percents. Posible values 0-100
behindCircleColor "#000000" behind circle color, in hexa
behindCircleAlpha 50 behind circle alpha, in percents. Posible values 0-100
     

Example of usage:

jQuery('#parallax_classic_bullets').parallax_classic({
skin: 'bullets',
width: 940,
height: 364,
defaultEasing:'easeOutElastic',
autoPlay:14,
responsive:true,
autoHideBottomNav:false,
showPreviewThumbs:true,
autoHideNavArrows:true,
showCircleTimer:true,
myloaderTime:6,
scrollSlideDuration:1.8,
scrollSlideEasing:'easeInQuint',
thumbsWrapperMarginBottom:-45
});

 

 

Banner Content Definition

Inside the main div (ex: <div id="parallax_classic_bullets">) you'll add a list:
<ul class="parallax_classic_list">
Inside this list you'll add each screen content you want to be present in your banner. The code is:
<li>html content here</li>

Example of usage:

<div id="parallax_classic_bullets">
<div class="myloader"></div>

<ul class="parallax_classic_list">
<li>html content1 here</li>
<li>html content2 here</li>
<li>html content3 here</li>
</ul>

</div>

The <li> element can have optional paramenters.

Optional parameters:

Parameter Ex. of usage Description
data-text-id <li data-text-id="#text_id_animation">html content here</li> Used to define the div id which will hold the animated text appearing over the content
data-video <li data-video="true">html content here</li> This parameter has to appear if you have video content beneath main photo
data-bottom-thumb <li data-text-id="#text_id_animation" data-bottom-thumb="images/classic/thumbs/thumb1.jpg">html content here</li>

A preview image will appear on hovering the corresponding bottom button
data-link <li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio">html content here</li> You can specify a link associated to the primary photo
data-target <li data-text-id="#text_id_animation"data-link="http://codecanyon.net/user/LambertGroup/portfolio"data-target="_self">html content here</li>

Possible values:
'_blank' - the link associated to the primary photo will open in a new window
'_slef'- the link associated to the primary photo will open in the same window

*** If this parameter is not added, the value of JS parameter 'target', will be used. Please refer to JS options section

 

 

 

Layer/Text Animation

For each slide you can define animated layers (text or image). All layers associated with a slide will reside inside a div. The div id will be put as optional parameter "data-text-id"

<li data-text-id="#text_id_animation">html content here</li>

 

The div containing the text will look like this. What you see below with red are mandatory classes:

<div id="text_id_animation" class="parallax_classic_texts">

<div class="parallax_classic_text_line particular_customizing1" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="40" data-duration="0.5" data-fade-start="0" data-delay="0">Line 1</div>
<div class="parallax_classic_text_line particular_customizing2" data-initial-left="50" data-initial-top="10" data-final-left="50" data-final-top="70" data-duration="0.5" data-fade-start="0" data-delay="0.3">Line 2</div>

</div>

 

For each line of text you can create a separate css class (Ex: particular_customizing1) to customize the text line. Also, each text line has the following optional parameters to control the text animation

Parameter Description
Layer/Text Enter Parameters
data-initial-left the text left initial postion (in pixels)
data-initial-top the text top initial postion (in pixels)
data-final-left the text left final postion (in pixels)
data-final-top the text top final postion (in pixels)
data-duration the animation duration (in seconds)
data-fade-start initial fade value. Values from 0 to 100
data-delay delay time (in seconds)
data-easing The easing for layer animation. Possible values:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

*** If this parameter is not added, the value of JS parameter 'defaultEasing, will be used. Please refer to JS options section.
   
Layer/Text Exit Parameters
data-exit-left

the left position, for layer exit (in pixels)

*** If this parameter is not added, the value of JS parameter 'defaultExitLeft', will be used. Please refer to JS options section
data-exit-top

the top position, for layer exit (in pixels)

*** If this parameter is not added, the value of JS parameter 'defaultExitTop', will be used. Please refer to JS options section
data-exit-duration

the duration, for layer exit (in seconds)

*** If this parameter is not added, the value of JS parameter 'defaultExitDuration', will be used. Please refer to JS options section
data-exit-delay

the time delay, for layer exit (in seconds)

*** If this parameter is not added, the value of JS parameter 'defaultExitDelay', will be used. Please refer to JS options section
data-exit-easing The easing for layer exit animation. Possible values:
linear
swing
easeInQuad
easeOutQuad
easeInOutQuad
easeInCubic
easeOutCubic
easeInOutCubic
easeInQuart
easeOutQuart
easeInOutQuart
easeInSine
easeOutSine
easeInOutSine
easeInExpo
easeOutExpo
easeInOutExpo
easeInQuint
easeOutQuint
easeInOutQuint
easeInCirc
easeOutCirc
easeInOutCirc
easeInElastic
easeOutElastic
easeInOutElastic
easeInBack
easeOutBack
easeInOutBack
easeInBounce
easeOutBounce
easeInOutBounce

*** If this parameter is not added, the value of JS parameter 'defaultExitEasing, will be used. Please refer to JS options section
data-exit-off

Possible values:
true - the layer will not exit
false - the layer will exit according to exit left, top, delay, duration and easing value

*** If this parameter is not added, the value of JS parameter 'defaultExitOFF', will be used. Please refer to JS options section
   
Other parameters
data-preanimate Possible values:
true - the layer will be preanimated and will appear in the final position, without animation
false - the layer will animate from initial to final position. Is the parameter is not present, false value is used by default.