mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
728 lines
23 KiB
HTML
728 lines
23 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" 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="editor/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'>
|
|
|
|
|
|
</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="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/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="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="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> |