OXIESEC PANEL
- Current Dir:
/
/
home
/
cubot
/
docroot
/
assets
/
plugins
/
revolution-slider
/
editor
Server IP: 139.59.38.164
Upload:
Create Dir:
Name
Size
Modified
Perms
📁
..
-
08/14/2022 11:10:36 AM
rwxr-xr-x
📄
00.Editor-Captions.html
32.7 KB
08/14/2022 11:10:36 AM
rw-r--r--
📄
01.Editor-Transitions.html
23.29 KB
08/14/2022 11:10:36 AM
rw-r--r--
📁
editor
-
08/14/2022 11:10:35 AM
rwxr-xr-x
Editing: 00.Editor-Captions.html
Close
<!DOCTYPE html> <!-- ####################################### - THE HEAD PART - ###################################### --> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>SLIDER REVOLUTION - The Responsive Slider Plugin</title> <link rel="icon" type="image/png" href="../examples&source/images/sitelogo.png" /> <!-- commented, remove this line to use IE & iOS favicons --> <link rel="shortcut icon" href="../examples&source/images/favicon.ico" /> <!-- get jQuery from the google apis --> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script> <!-- CSS STYLE --> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM --> <link rel="stylesheet" href="editor/type/fontello.css"> <link rel="stylesheet" type="text/css" href="../examples&source/css/navstylechange.css" media="screen" /> <link rel="stylesheet" type="text/css" href="editor/editor.css" media="screen" /> <!-- THE ICON FONTS --> <link rel="stylesheet" href="../examples&source/css/type/fontello.css"> <script type="text/javascript" src="editor/editor.js"></script> <!-- jQuery REVOLUTION Slider --> <script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.tools.min.js"></script> <script type="text/javascript" src="../examples&source/rs-plugin/js/jquery.themepunch.revolution.min.js"></script> <!-- REVOLUTION BANNER CSS SETTINGS --> <link rel="stylesheet" type="text/css" href="../examples&source/rs-plugin/css/settings.css" media="screen" /> <!-- GOOGLE FONTS --> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700,800' rel='stylesheet' type='text/css'> </head> <!-- ####################################### - THE BODY PART - ###################################### --> <body> <header> <section class="container"> <article class="logo-container"><div class="logo"></div></article> <div class="clear"></div> </section> </header> <!-- END OF HEADER --> <!-- ################################# - THEMEPUNCH BANNER - ################################# --> <article class="spectaculus"> <h2>The Simple Animations handled via Classes:</h2> <!-- START REVOLUTION SLIDER 3.1 rev5 fullwidth mode --> <div class="fullwidthbanner-container roundedcorners"> <div class="fullwidthbanner" > <ul> <!-- SLIDE --> <li data-transition="fade" data-slotamount="5" data-masterspeed="700" > <!-- MAIN IMAGE --> <img src="../examples&source/images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <div class="tp-caption mediumlarge_light_white_center customin customout start" data-x="50" data-hoffset="0" data-y="50" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="500" data-easing="Back.easeInOut" data-endspeed="300">BASIC CAPTION<br>ANIMATIONS </div> <!-- LAYER NR. 1 --> <div class="tp-caption medium_bg_asbestos fade" data-x="50" data-y="250" data-speed="500" data-start="800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">FADE </div> <!-- LAYER NR. 2 --> <div class="tp-caption medium_bg_asbestos sfl" data-x="50" data-y="300" data-speed="500" data-start="1200" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM LEFT (sfl) </div> <!-- LAYER NR. 3 --> <div class="tp-caption medium_bg_asbestos skewfromleft" data-x="50" data-y="350" data-speed="800" data-start="1900" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SKEW FROM LEFT (skewfromleft) </div> <!-- LAYER NR. 4 --> <div class="tp-caption medium_bg_asbestos sft" data-x="50" data-y="200" data-speed="800" data-start="2600" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM TOP (sft) </div> <!-- LAYER NR. 5 --> <div class="tp-caption medium_bg_asbestos lft" data-x="50" data-y="400" data-speed="800" data-start="3300" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM TOP (lft) </div> <!-- LAYER NR. 6 --> <div class="tp-caption medium_bg_asbestos sfr" data-x="right" data-hoffset="-50" data-y="200" data-speed="800" data-start="4000" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM RIGHT (sfr) </div> <!-- LAYER NR. 7 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="250" data-speed="800" data-start="4700" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SKEW FROM RIGHT (skewfromright) </div> <!-- LAYER NR. 8 --> <div class="tp-caption medium_bg_asbestos sfb" data-x="right" data-hoffset="-50" data-y="300" data-speed="800" data-start="5400" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM BOTTOM (sfb) </div> <!-- LAYER NR. 9 --> <div class="tp-caption medium_bg_asbestos lfb" data-x="right" data-hoffset="-50" data-y="350" data-speed="800" data-start="6100" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM BOTTOM (lfb) </div> <!-- LAYER NR. 10 --> <div class="tp-caption medium_bg_asbestos randomrotate" data-x="right" data-hoffset="-50" data-y="400" data-speed="800" data-start="6800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">RANDOM ROTATE (randomrotate) </div> <!-- LAYER NR. 11 --> <div class="tp-caption medium_bg_asbestos lfr" data-x="right" data-hoffset="-50" data-y="450" data-speed="800" data-start="7500" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM RIGHT (lfr) </div> <!-- LAYER NR. 12 --> <div class="tp-caption medium_bg_asbestos lfl" data-x="50" data-y="450" data-speed="800" data-start="7500" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM LEFT (lfl) </div> </li> <!-- SLIDE --> <li data-transition="fade" data-slotamount="5" data-masterspeed="700" > <!-- MAIN IMAGE --> <img src="../examples&source/images/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <div class="tp-caption mediumlarge_light_white_center customin customout start" data-x="50" data-hoffset="0" data-y="50" data-customin="x:0;y:0;z:0;rotationX:90;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:200;transformOrigin:50% 0%;" data-customout="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;" data-speed="1000" data-start="500" data-easing="Back.easeInOut" data-endspeed="300">BASIC CAPTION<br>ANIMATIONS </div> <!-- LAYER NR. 1 --> <div class="tp-caption medium_bg_asbestos fade" data-x="50" data-y="250" data-speed="500" data-start="800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">FADE </div> <!-- LAYER NR. 2 --> <div class="tp-caption medium_bg_asbestos sfl" data-x="50" data-y="300" data-speed="500" data-start="1200" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM LEFT (sfl) </div> <!-- LAYER NR. 3 --> <div class="tp-caption medium_bg_asbestos skewfromleft" data-x="50" data-y="350" data-speed="800" data-start="1900" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SKEW FROM LEFT (skewfromleft) </div> <!-- LAYER NR. 4 --> <div class="tp-caption medium_bg_asbestos sft" data-x="50" data-y="200" data-speed="800" data-start="2600" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM TOP (sft) </div> <!-- LAYER NR. 5 --> <div class="tp-caption medium_bg_asbestos lft" data-x="50" data-y="400" data-speed="800" data-start="3300" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM TOP (lft) </div> <!-- LAYER NR. 6 --> <div class="tp-caption medium_bg_asbestos sfr" data-x="right" data-hoffset="-50" data-y="200" data-speed="800" data-start="4000" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM RIGHT (sfr) </div> <!-- LAYER NR. 7 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="250" data-speed="800" data-start="4700" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SKEW FROM RIGHT (skewfromright) </div> <!-- LAYER NR. 8 --> <div class="tp-caption medium_bg_asbestos sfb" data-x="right" data-hoffset="-50" data-y="300" data-speed="800" data-start="5400" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">SHORT FROM BOTTOM (sfb) </div> <!-- LAYER NR. 9 --> <div class="tp-caption medium_bg_asbestos lfb" data-x="right" data-hoffset="-50" data-y="350" data-speed="800" data-start="6100" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM BOTTOM (lfb) </div> <!-- LAYER NR. 10 --> <div class="tp-caption medium_bg_asbestos randomrotate" data-x="right" data-hoffset="-50" data-y="400" data-speed="800" data-start="6800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">RANDOM ROTATE (randomrotate) </div> <!-- LAYER NR. 11 --> <div class="tp-caption medium_bg_asbestos lfr" data-x="right" data-hoffset="-50" data-y="450" data-speed="800" data-start="7500" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM RIGHT (lfr) </div> <!-- LAYER NR. 12 --> <div class="tp-caption medium_bg_asbestos lfl" data-x="50" data-y="450" data-speed="800" data-start="7500" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">LONG FROM LEFT (lfl) </div> </li> </ul> <div class="tp-bannertimer"></div> </div> </div> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.fullwidthbanner').revolution( { delay:15000, startwidth:1170, startheight:500, hideThumbs:10, }); }); //ready </script> <!-- END REVOLUTION SLIDER --> <!-- Content End --> </article> <!-- END OF SPECTACULUS --> <div style="width:100%;height:40px"></div> <article class="content hidemeonmobile"> <!-- THE TOOLPAD --> <section class="container"> <h2>The Custom Animations (available via the customin and customout classes) Creator:</h2> <h2 class="redtitle nobottommargin"> <span style="float:left">Custom Caption Animation Builder</span> <span style="float: right;"><a style="color:#fff;text-decortation:none !important" href="javascript:void(0);" id="set-random-animation">random</a></span> <div class="clear"></div> </h2> <div id="layeranimeditor_wrap" title="Layer Animation Editor" > <div class="tp-present-wrapper-parent"> <div class="tp-present-wrapper"> <div class="tp-present-caption"> <div id="caption_custon_anim_preview" class="">LAYER EXAMPLE</div> </div> </div> </div> <!-****************************** - IN ANIMATION SECTION - *******************************-> <section id="inanimation"> <div class="caption-demo-controll"> <div id="caption-inout-controll" class="caption-inout-controll"> <i id="" class="revicon-login"></i> In Animation Editor<span style="font-size:12px"> (Click to Collapse/Expand)</span> </div> </div> <div class="settings_wrapper"> <div class="postbox unite-postbox"> <table class="lasttable" style="padding-top:20px;border-spacing:0px"> <!-- TRANSITION --> <tr class="css-edit-title " ><td colspan="9" >Speed & Easing</td></tr> <tr class=""> <td>Speed:</td> <td > <input class="css_edit_novice tpshortinput" name="captionspeed" type="text" value="600" />ms </td> <td>Easing:</td> <td > <select id="caption-easing-demo" name="caption-easing-demo" class=""> <option value="Linear.easeNone">Linear.easeNone</option> <option value="Power0.easeIn">Power0.easeIn (linear)</option> <option value="Power0.easeInOut">Power0.easeInOut (linear)</option> <option value="Power0.easeOut">Power0.easeOut (linear)</option> <option value="Power1.easeIn">Power1.easeIn</option> <option value="Power1.easeInOut">Power1.easeInOut</option> <option value="Power1.easeOut">Power1.easeOut</option> <option value="Power2.easeIn">Power2.easeIn</option> <option value="Power2.easeInOut">Power2.easeInOut</option> <option value="Power2.easeOut">Power2.easeOut</option> <option value="Power3.easeIn">Power3.easeIn</option> <option value="Power3.easeInOut">Power3.easeInOut</option> <option value="Power3.easeOut">Power3.easeOut</option> <option value="Power4.easeIn">Power4.easeIn</option> <option value="Power4.easeInOut">Power4.easeInOut</option> <option value="Power4.easeOut">Power4.easeOut</option> <option value="Back.easeIn">Back.easeIn</option> <option value="Back.easeInOut">Back.easeInOut</option> <option value="Back.easeOut">Back.easeOut</option> <option value="Bounce.easeIn">Bounce.easeIn</option> <option value="Bounce.easeInOut">Bounce.easeInOut</option> <option value="Bounce.easeOut">Bounce.easeOut</option> <option value="Circ.easeIn">Circ.easeIn</option> <option value="Circ.easeInOut">Circ.easeInOut</option> <option value="Circ.easeOut">Circ.easeOut</option> <option value="Elastic.easeIn">Elastic.easeIn</option> <option value="Elastic.easeInOut">Elastic.easeInOut</option> <option value="Elastic.easeOut">Elastic.easeOut</option> <option value="Expo.easeIn">Expo.easeIn</option> <option value="Expo.easeInOut">Expo.easeInOut</option> <option value="Expo.easeOut">Expo.easeOut</option> <option value="Sine.easeIn">Sine.easeIn</option> <option value="Sine.easeInOut">Sine.easeInOut</option> <option value="Sine.easeOut">Sine.easeOut</option> <option value="SlowMo.ease">SlowMo.ease</option> </select> </td> <td></td> <td>Split:</td> <td > <select id="caption-splitin-demo" name="caption-splitin-demo" class=""> <option value="none">none</option> <option value="lines">Lines</option> <option value="words">Words</option> <option value="chars">Chars</option> </select> </td> <td>Speed:</td> <td > <input class="css_edit_novice tpshortinput" name="splitspeedin" type="text" value="100" />ms </td> </tr> <!-- ROTATION --> </table> <table style="border-spacing:0px"> <!-- TRANSITION --> <tr class="css-edit-title graybasicbg" ><td colspan="9" >Transition</td></tr> <tr class="graybasicbg"> <td>X:</td> <td > <input class="css_edit_novice tpshortinput" name="movex" type="text" value="0" />px </td> <td>Y:</td> <td > <input class="css_edit_novice tpshortinput" name="movey" type="text" value="0" />px </td> <td>Z:</td> <td > <input class="css_edit_novice tpshortinput" name="movez" type="text" value="0" />px </td> <td></td> <td></td> <td></td> </tr> <!-- ROTATION --> </table> <table style="border-spacing:0px"> <tr class="css-edit-title"> <td colspan="9" >Rotation</td> </tr> <tr> <td>X:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationx" type="text" value="0" />° </td> <td>Y:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationy" type="text" value="0" />° </td> <td>Z:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationz" type="text" value="0" />° </td> <td></td> <td></td> <td></td> </tr> </table> <table style="border-spacing:0px"> <!-- SCALE && SKEW--> <tr class="css-edit-title graybasicbg"> <td colspan="4" >Scale</td> <td colspan="5" >Skew</td> </tr> <tr class="graybasicbg"> <!-- SCALE X --> <td >X:</td> <td > <input class="css_edit_novice tpshortinput" name="scalex" type="text" value="100" />% </td> <!-- SCALE Y --> <td >Y:</td> <td > <input class="css_edit_novice tpshortinput" name="scaley" type="text" value="100" />% </td> <td >X:</td> <!-- SKEW X --> <td > <input class="css_edit_novice tpshortinput" name="skewx" type="text" value="0" />° </td> <td >Y:</td> <!-- SKEW Y --> <td > <input class="css_edit_novice tpshortinput" name="skewy" type="text" value="0" />° </td> <td></td> </tr> </table> <table class="lasttable" style="padding-bottom:20px;border-spacing:0px"> <!-- OPACITY --> <tr class="css-edit-title"> <td colspan="2">Opacity</td> <td colspan="2">Perspective</td> <td colspan="5">Origin</td> </tr> <tr class=""> <!-- OPACITY --> <td >0-100:</td> <td > <input class="css_edit_novice tpshortinput" name="captionopacity" type="text" value="0" />% </td> <!-- PERSPECTIVE --> <td >300-1600:</td> <td > <input class="css_edit_novice tpshortinput" name="captionperspective" type="text" value="600" />px </td> <!-- ORIGINX --> <td >X:</td> <td > <input class="css_edit_novice tpshortinput" name="originx" type="text" value="50" />% </td> <!-- ORIGINY --> <td >Y:</td> <td > <input class="css_edit_novice tpshortinput" name="originy" type="text" value="50" />% </td> <td></td> </tr> </table> </div> </div> </section> <!-****************************** - OUT ANIMATION SECTION - *******************************-> <section id="outanimation"> <div class="caption-demo-controll"> <div id="caption-inout-controll" class="caption-inout-controll"> <i id="" class="revicon-logout"></i> Out Animation Editor <span style="font-size:12px"> (Click to Collapse/Expand)</span> </div> </div> <div class="settings_wrapper"> <div class="postbox unite-postbox"> <table class="lasttable" style="padding-top:20px;border-spacing:0px"> <!-- TRANSITION --> <tr class="css-edit-title " ><td colspan="9" >Speed & Easing</td></tr> <tr class=""> <td>Speed:</td> <td > <input class="css_edit_novice tpshortinput" name="captionspeedout" type="text" value="600" />ms </td> <td>Easing:</td> <td > <select id="caption-easing-demoout" name="caption-easing-demooutout" class=""> <option value="Linear.easeNone">Linear.easeNone</option> <option value="Power0.easeIn">Power0.easeIn (linear)</option> <option value="Power0.easeInOut">Power0.easeInOut (linear)</option> <option value="Power0.easeOut">Power0.easeOut (linear)</option> <option value="Power1.easeIn">Power1.easeIn</option> <option value="Power1.easeInOut">Power1.easeInOut</option> <option value="Power1.easeOut">Power1.easeOut</option> <option value="Power2.easeIn">Power2.easeIn</option> <option value="Power2.easeInOut">Power2.easeInOut</option> <option value="Power2.easeOut">Power2.easeOut</option> <option value="Power3.easeIn">Power3.easeIn</option> <option value="Power3.easeInOut">Power3.easeInOut</option> <option value="Power3.easeOut">Power3.easeOut</option> <option value="Power4.easeIn">Power4.easeIn</option> <option value="Power4.easeInOut">Power4.easeInOut</option> <option value="Power4.easeOut">Power4.easeOut</option> <option value="Back.easeIn">Back.easeIn</option> <option value="Back.easeInOut">Back.easeInOut</option> <option value="Back.easeOut">Back.easeOut</option> <option value="Bounce.easeIn">Bounce.easeIn</option> <option value="Bounce.easeInOut">Bounce.easeInOut</option> <option value="Bounce.easeOut">Bounce.easeOut</option> <option value="Circ.easeIn">Circ.easeIn</option> <option value="Circ.easeInOut">Circ.easeInOut</option> <option value="Circ.easeOut">Circ.easeOut</option> <option value="Elastic.easeIn">Elastic.easeIn</option> <option value="Elastic.easeInOut">Elastic.easeInOut</option> <option value="Elastic.easeOut">Elastic.easeOut</option> <option value="Expo.easeIn">Expo.easeIn</option> <option value="Expo.easeInOut">Expo.easeInOut</option> <option value="Expo.easeOut">Expo.easeOut</option> <option value="Sine.easeIn">Sine.easeIn</option> <option value="Sine.easeInOut">Sine.easeInOut</option> <option value="Sine.easeOut">Sine.easeOut</option> <option value="SlowMo.ease">SlowMo.ease</option> </select> </td> <td></td> <td>Split:</td> <td > <select id="caption-splitout-demo" name="caption-splitout-demo" class=""> <option value="none">none</option> <option value="lines">Lines</option> <option value="words">Words</option> <option value="chars">Chars</option> </select> </td> <td>Speed:</td> <td > <input class="css_edit_novice tpshortinput" name="splitspeedout" type="text" value="100" />ms </td> </tr> <!-- ROTATION --> </table> <table style="border-spacing:0px"> <!-- TRANSITION --> <tr class="css-edit-title graybasicbg" ><td colspan="9" >Transition</td></tr> <tr class="graybasicbg"> <td>X:</td> <td > <input class="css_edit_novice tpshortinput" name="movexout" type="text" value="0" />px </td> <td>Y:</td> <td > <input class="css_edit_novice tpshortinput" name="moveyout" type="text" value="0" />px </td> <td>Z:</td> <td > <input class="css_edit_novice tpshortinput" name="movezout" type="text" value="0" />px </td> <td></td> <td></td> <td></td> </tr> <!-- ROTATION --> </table> <table style="border-spacing:0px"> <tr class="css-edit-title"> <td colspan="9" >Rotation</td> </tr> <tr> <td>X:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationxout" type="text" value="0" />° </td> <td>Y:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationyout" type="text" value="0" />° </td> <td>Z:</td> <td > <input class="css_edit_novice tpshortinput" name="rotationzout" type="text" value="0" />° </td> <td></td> <td></td> <td></td> </tr> </table> <table style="border-spacing:0px"> <!-- SCALE && SKEW--> <tr class="css-edit-title graybasicbg"> <td colspan="4" >Scale</td> <td colspan="5" >Skew</td> </tr> <tr class="graybasicbg"> <!-- SCALE X --> <td >X:</td> <td > <input class="css_edit_novice tpshortinput" name="scalexout" type="text" value="100" />% </td> <!-- SCALE Y --> <td >Y:</td> <td > <input class="css_edit_novice tpshortinput" name="scaleyout" type="text" value="100" />% </td> <td >X:</td> <!-- SKEW X --> <td > <input class="css_edit_novice tpshortinput" name="skewxout" type="text" value="0" />° </td> <td >Y:</td> <!-- SKEW Y --> <td > <input class="css_edit_novice tpshortinput" name="skewyout" type="text" value="0" />° </td> <td></td> </tr> </table> <table class="lasttable" style="padding-bottom:20px;border-spacing:0px"> <!-- OPACITY --> <tr class="css-edit-title"> <td colspan="2" >Opacity</td> <td colspan="2" >Perspective</td> <td colspan="5" >Origin</td> </tr> <tr class=""> <!-- OPACITY --> <td >0-100:</td> <td > <input class="css_edit_novice tpshortinput" name="captionopacityout" type="text" value="0" />% </td> <!-- PERSPECTIVE --> <td >300-1200:</td> <td > <input class="css_edit_novice tpshortinput" name="captionperspectiveout" type="text" value="600" />px </td> <!-- ORIGINX --> <td >X:</td> <td > <input class="css_edit_novice tpshortinput" name="originxout" type="text" value="50" />% </td> <!-- ORIGINY --> <td >Y:</td> <td > <input class="css_edit_novice tpshortinput" name="originyout" type="text" value="50" />% </td> <td></td> </tr> </table> </div> </div> </div> <!-- OUTPUT OF LAYER ANIMATIONS --> <div class="divide40"></div> <h2 class="redtitle">Result of Custom IN/OUT Animations</h2> <section class="boxed-content" style="margin-top:-40px; border-radius:0px 0px 5px 5px; -webkit-border-radius:0px 0px 5px 5px;-moz-border-radius:0px 0px 5px 5px;"> <!-- THE MOST POPULAR PLUGIN --> <pre> <!-- LAYER NR. 1 --> <div class="tp-caption customin customout" data-x="center" data-y="center" data-customin="<span id="custominresult">x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;</span>" data-customout="<span id="customoutresult">x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.75;scaleY:0.75;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;</span>" data-start="1000" data-speed="<span id="custominspeed">500</span>" data-easing="<span id="custominease">Power3.easeIn</span>" data-splitin="<span id="presplitin">None</span>" data-elementdelay="<span id="predelayin">100</span>" data-end="1500" data-endspeed="<span id="customoutspeed">500</span>" data-endeasing="<span id="customoutease">Power3.easeIn</span>" data-splitout="<span id="presplitout">None</span>" data-endelementdelay="<span id="predleayout">100</span>" >LAYER EXAMPLE </div> </pre> <h2>How to use it?</h2> <p>Simple copy the Result div above as a new layer under your <li> Slide container. You can add some further Classes for Styling the Caption (see all style in the settings.css file)</p> <p>In case you have already some Caption and you only wish to have a differen transition than the Basic Caption Transitions (see Documentation for full list) you can simple copy the data- customin,customout,speed,easing,endspeed and endeasing parameters. Dont forget to set to your caption a position via data-x and data-y and set the start and endtime for tha animatiosn !</p> <div class="clear"></div> </section><!-- END OF BOXED CONTAINER --> </section> </article> </body>