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: 01.Editor-Transitions.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="../examples&source/css/style.css" media="screen" /> <!-- THE PREVIEW STYLE SHEETS, NO NEED TO LOAD IN YOUR DOM --> <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="editor/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"> <!-- 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/bg2.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER 0 --> <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">SOME FANCY EASING </div> <!-- LAYER NR. 1 --> <div class="tp-caption medium_bg_asbestos sfl" data-x="50" data-y="250" data-speed="500" data-start="800" data-easing="Power1.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Power1.easeOut </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="Back.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Back.easeOut </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="Elastic.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Elastic.easeOut </div> <!-- LAYER NR. 4 --> <div class="tp-caption medium_bg_asbestos skewfromleft" data-x="50" data-y="200" data-speed="800" data-start="2600" data-easing="Power3.easeInOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Power3.easeInOut </div> <!-- LAYER NR. 5 --> <div class="tp-caption medium_bg_asbestos skewfromleft" 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">Power4.easeOut </div> <!-- LAYER NR. 6 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="200" data-speed="800" data-start="4000" data-easing="Power2.easeInOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Power2.easeInOut </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="Circ.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Circ.easeOut </div> <!-- LAYER NR. 8 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="300" data-speed="800" data-start="5400" data-easing="Cube.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Cube.easeOut </div> <!-- LAYER NR. 9 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="350" data-speed="800" data-start="6100" data-easing="Bounce.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Bounce.easeOut </div> <!-- LAYER NR. 10 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="400" data-speed="800" data-start="6800" data-easing="Linear.easeNone" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Linear.easeNone </div> <!-- LAYER NR. 11 --> <div class="tp-caption medium_bg_asbestos skewfromright" data-x="right" data-hoffset="-50" data-y="450" data-speed="800" data-start="7500" data-easing="Expo.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Expo.easeOut </div> <!-- LAYER NR. 12 --> <div class="tp-caption medium_bg_asbestos skewfromleft" data-x="50" data-y="450" data-speed="800" data-start="7500" data-easing="Expo.easeIn" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="off" style="z-index: 6">Expo.easeIn </div> </li> <!-- SLIDE --> <li data-transition="fade" data-slotamount="5" data-masterspeed="700" > <!-- MAIN IMAGE --> <img src="../examples&source/images/bg3.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYERS --> <div class="tp-caption mediumlarge_light_white_center customin customout start" data-x="right" data-hoffset="-60" data-y="bottom" data-voffset="-120" 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">TRY THE<br>CAPTION ANIMATION<br> BUILDER BELOW </div> <!-- LAYER NR. 5 --> <div class="tp-caption medium_bg_asbestos skewfromleft customout" data-x="104" data-y="154" 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="800" data-start="800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="on" style="z-index: 6">GO AND GIVE A TRY </div> </li> <!-- SLIDE --> <li data-transition="fade" data-slotamount="5" data-masterspeed="700" > <!-- MAIN IMAGE --> <img src="../examples&source/images/bg4.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat"> <!-- LAYERS --> <!-- LAYER NR. 5 --> <div class="tp-caption medium_bg_asbestos skewfromleft customout" data-x="104" data-y="154" 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="800" data-start="800" data-easing="Power4.easeOut" data-endspeed="300" data-endeasing="Power1.easeIn" data-captionhidden="on" style="z-index: 6">CREATE AWESOME ANIMATIONS </div> </li> </ul> <div class="tp-bannertimer"></div> </div> </div> <script type="text/javascript"> var revapi; jQuery(document).ready(function() { revapi = jQuery('.fullwidthbanner').revolution( { delay:15000, startwidth:1170, startheight:500, hideThumbs:10, thumbWidth:100, thumbHeight:50, thumbAmount:5, navigationType:"both", navigationArrows:"solo", navigationStyle:"round", touchenabled:"on", onHoverStop:"on", navigationHAlign:"center", navigationVAlign:"bottom", navigationHOffset:0, navigationVOffset:0, soloArrowLeftHalign:"left", soloArrowLeftValign:"center", soloArrowLeftHOffset:20, soloArrowLeftVOffset:0, soloArrowRightHalign:"right", soloArrowRightValign:"center", soloArrowRightHOffset:20, soloArrowRightVOffset:0, shadow:0, fullWidth:"on", fullScreen:"off", stopLoop:"on", stopAfterLoops:0, stopAtSlide:1, shuffle:"off", autoHeight:"off", forceFullWidth:"off", hideThumbsOnMobile:"off", hideBulletsOnMobile:"on", hideArrowsOnMobile:"on", hideThumbsUnderResolution:0, hideSliderAtLimit:0, hideCaptionAtLimit:768, hideAllCaptionAtLilmit:0, startWithSlide:0, videoJsPath:"plugins/revslider/rs-plugin/videojs/", fullScreenOffsetContainer: "" }); }); //ready </script> <!-- END REVOLUTION SLIDER --> <!-- Content End --> </article> <!-- END OF SPECTACULUS --> <article class="content hidemeonmobile"> <!-- THE TOOLPAD --> <section class="container"> <article class="toolpad"> <!--<section class="tryme"></section>--> <section class="tool first" id="transitselector"> <div class="tooltext norightcorner long" id="mranim" style="cursor:pointer">Fade</div> <div class="toolcontrols short"> <div class="toolcontroll noleftcorner"><div class="icon-up-dir-1 centertop"></div><div class="icon-down-dir-1 centerbottom"></div></div> </div> <div class="transition-selectbox-holder"> <div class="transition-selectbox"> <ul> <li class="animchanger" data-anim="">Flat Fade Transitions</li> <li class="animchanger" data-anim="fade">Fade</li> <li class="animchanger" data-anim="boxfade">Fade Boxes</li> <li class="animchanger" data-anim="slotfade-horizontal">Fade Slots Horizontal</li> <li class="animchanger" data-anim="slotfade-vertical">Fade Slots Vertical</li> <li class="animchanger" data-anim="fadefromright">Fade and Slide from Right</li> <li class="animchanger" data-anim="fadefromleft">Fade and Slide from Left</li> <li class="animchanger" data-anim="fadefromtop">Fade and Slide from Top</li> <li class="animchanger" data-anim="fadefrombottom">Fade and Slide from Bottom</li> <li class="animchanger" data-anim="fadetoleftfadefromright">Fade To Left and Fade From Right</li> <li class="animchanger" data-anim="fadetorightfadetoleft">Fade To Right and Fade From Left</li> <li class="animchanger" data-anim="fadetobottomfadefromtop">Fade To Top and Fade From Bottom</li> <li class="animchanger" data-anim="fadetotopfadefrombottom">Fade To Bottom and Fade From Top</li> </ul> <ul> <li class="animchanger" data-anim="">Flat Zoom Transitions</li> <li class="animchanger" data-anim="scaledownfromright">Zoom Out and Fade From Right</li> <li class="animchanger" data-anim="scaledownfromleft">Zoom Out and Fade From Left</li> <li class="animchanger" data-anim="scaledownfromtop">Zoom Out and Fade From Top</li> <li class="animchanger" data-anim="scaledownfrombottom">Zoom Out and Fade From Bottom</li> <li class="animchanger" data-anim="zoomout">ZoomOut</li> <li class="animchanger" data-anim="zoomin">ZoomIn</li> <li class="animchanger" data-anim="slotzoom-horizontal">Zoom Slots Horizontal</li> <li class="animchanger" data-anim="slotzoom-vertical">Zoom Slots Vertical</li> </ul> <ul> <li class="animchanger" data-anim="">Flat Parallax Transitions</li> <li class="animchanger" data-anim="parallaxtoright">Parallax to Right</li> <li class="animchanger" data-anim="parallaxtoleft">Parallax to Left</li> <li class="animchanger" data-anim="parallaxtotop">Parallax to Top</li> <li class="animchanger" data-anim="parallaxtobottom">Parallax to Bottom</li> </ul> <ul> <li class="animchanger" data-anim="">Flat Slide Transitions</li> <li class="animchanger" data-anim="slideup">Slide To Top</li> <li class="animchanger" data-anim="slidedown">Slide To Bottom</li> <li class="animchanger" data-anim="slideright">Slide To Right</li> <li class="animchanger" data-anim="slideleft">Slide To Left</li> <li class="animchanger" data-anim="slidehorizontal">Slide Horizontal (depending on Next/Previous)</li> <li class="animchanger" data-anim="slidevertical">Slide Vertical (depending on Next/Previous)</li> <li class="animchanger" data-anim="boxslide">Slide Boxes</li> <li class="animchanger" data-anim="slotslide-horizontal">Slide Slots Horizontal</li> <li class="animchanger" data-anim="slotslide-vertical">Slide Slots Vertical</li> <li class="animchanger" data-anim="curtain-1">Curtain from Left</li> <li class="animchanger" data-anim="curtain-2">Curtain from Right</li> <li class="animchanger" data-anim="curtain-3">Curtain from Middle</li> </ul> <ul> <li class="animchanger" data-anim="">Premium Transitions</li> <li class="animchanger" data-anim="3dcurtain-horizontal">3D Curtain Horizontal</li> <li class="animchanger" data-anim="3dcurtain-vertical">3D Curtain Vertical</li> <li class="animchanger" data-anim="cubic">Cube Vertical</li> <li class="animchanger" data-anim="cubic-horizontal">Cube Horizontal</li> <li class="animchanger" data-anim="incube">In Cube Vertical</li> <li class="animchanger" data-anim="incube-horizontal">In Cube Horizontal</li> <li class="animchanger" data-anim="turnoff">TurnOff Horizontal</li> <li class="animchanger" data-anim="turnoff-vertical">TurnOff Vertical</li> <li class="animchanger" data-anim="papercut">Paper Cut</li> <li class="animchanger" data-anim="flyin">Fly In</li> <li class="animchanger" data-anim="random-static">Random Premium</li> <li class="animchanger" data-anim="random">Random Flat and Premium</li> </ul> </div> </div> <div class="clear"></div> </section> <section class="tool"> <div data-val="700" id="mrtime" class="tooltext">Time: 0.7s</div> <div class="toolcontrols"> <div id="dectime" class="toolcontroll withspace"><i class="icon-minus"></i></div> <div id="inctime" class="toolcontroll withspace2"><i class="icon-plus"></i></div> </div> <div class="clear"></div> </section> <section class="tool last"> <div data-val="5" class="tooltext" id="mrslot">Slots: 5</div> <div class="toolcontrols"> <div id="decslot" class="toolcontroll withspace"><i class="icon-minus"></i></div> <div id="incslot" class="toolcontroll withspace2"><i class="icon-plus"></i></div> </div> <div class="clear"></div> </section> <div class="clear"></div> </article> <!-- OUTPUT OF LAYER ANIMATIONS --> <div class="divide40"></div> <h2 class="redtitle">Result Of Transition</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;"> <pre> <!-- SLIDE --> <li <strong>data-transition="<span id='resultanim'>fade</span>" data-slotamount="<span id='resultslot'>5</span>" data-masterspeed="<span id='resultspeed'>700</span>"</strong> ></pre> <div class="clear"></div> </section><!-- END OF BOXED CONTAINER --> </section> </article> <div style="width:100%;height:200px"></div> </body>