mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
1031 lines
33 KiB
HTML
1031 lines
33 KiB
HTML
<!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="images/sitelogo.png" />
|
|
|
|
|
|
|
|
<!-- commented, remove this line to use IE & iOS favicons -->
|
|
<link rel="shortcut icon" href="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="css/navstylechange.css" media="screen" />
|
|
<link rel="stylesheet" type="text/css" href="editor/editor.css" media="screen" />
|
|
|
|
<!-- THE ICON FONTS -->
|
|
<link rel="stylesheet" href="css/type/fontello.css">
|
|
|
|
|
|
<script type="text/javascript" src="editor/editor.js"></script>
|
|
|
|
|
|
<!-- jQuery REVOLUTION Slider -->
|
|
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.plugins.min.js"></script>
|
|
<script type="text/javascript" src="rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
|
|
|
|
|
|
|
|
<!-- REVOLUTION BANNER CSS SETTINGS -->
|
|
<link rel="stylesheet" type="text/css" href="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'>
|
|
|
|
<!-- MEGAFOLIO GALLERY CSS SETTINGS -->
|
|
<link rel="stylesheet" type="text/css" href="megafolio/css/settings.css" media="screen" />
|
|
|
|
<!-- MEGAFOLIO GALLERY JS FILES -->
|
|
<script type="text/javascript" src="megafolio/js/jquery.themepunch.megafoliopro.js"></script>
|
|
|
|
<!-- THE FANYCYBOX ASSETS -->
|
|
<link rel="stylesheet" href="megafolio/fancybox/jquery.fancybox.css?v=2.1.3" type="text/css" media="screen" />
|
|
<script type="text/javascript" src="megafolio/fancybox/jquery.fancybox.pack.js?v=2.1.3"></script>
|
|
|
|
<!-- Optionally add helpers - button, thumbnail and/or media ONLY FOR ADVANCED USAGE-->
|
|
<script type="text/javascript" src="megafolio/fancybox/helpers/jquery.fancybox-media.js?v=1.0.5"></script>
|
|
|
|
|
|
</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="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="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> |