mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
1254 lines
48 KiB
HTML
1254 lines
48 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>
|
|
|
|
<!-- 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="css/noneed.css" media="screen" />
|
|
|
|
|
|
<!-- SLIDER REVOLUTION 4.x SCRIPTS -->
|
|
<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>
|
|
|
|
<!-- SLIDER REVOLUTION 4.x 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>
|
|
|
|
<article class="prevnext">
|
|
<a class="" href="01.Sample-Boxed.html">01</a>
|
|
<a class="" href="02.Sample-Fullwidth.html">02</a>
|
|
<a class="" href="03.Sample-FullScreen.html">03</a>
|
|
<a class="" href="04.Sample-FullScreen-Offsets.html">04</a>
|
|
<a class="" href="05.Sample-Aligns.html">05</a>
|
|
<a class="" href="06.Sample-AlignForce.html">06</a>
|
|
<a class="" href="07.Sample-Videos.html">07</a>
|
|
<a class="" href="08.Sample-NavigationStyle.html">08</a>
|
|
<a class="" href="09.Sample-Api.html">09</a>
|
|
<a class="" href="10.B.Sample-LazyLoading Level2.html">10</a>
|
|
<a class="" href="11.Sample-Shuffle.html">11</a>
|
|
<a class="" href="12.Sample-Backgrounds.html">12</a>
|
|
<a class="" href="13.Sample-HideCaptions.html">13</a>
|
|
<a class="" href="14.Sample-KenBurns.html">14</a>
|
|
<a class="" href="15.Sample-VideoBG.html">15</a>
|
|
<a class="" href="16.Caption-ShowDown.html">16</a>
|
|
<a class="" href="17.Sample-DottedBG.html">17</a>
|
|
<a class="" href="18.Sample-NewCaptionEffects.html">18</a>
|
|
</article>
|
|
|
|
|
|
<!-- HEADER -->
|
|
<header>
|
|
<section class="container">
|
|
<article class="logo-container"><a href="http://themes.themepunch.com/?theme=revolution_jq"><div class="logo"></div></a></article>
|
|
<div class="button-holder"><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank" class="button"><strong>BUY NOW</strong></a></div>
|
|
<div style="clear:both"></div>
|
|
</section>
|
|
</header> <!-- END OF HEADER -->
|
|
|
|
|
|
<article class="boxedcontainer">
|
|
|
|
<!--
|
|
#################################
|
|
- THEMEPUNCH BANNER -
|
|
#################################
|
|
-->
|
|
<div class="tp-banner-container">
|
|
<div class="tp-banner" >
|
|
<ul> <!-- SLIDE -->
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/slidebg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption lightgrey_divider skewfromrightshort customout"
|
|
data-x="85"
|
|
data-y="224"
|
|
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="500"
|
|
data-start="1200"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 2">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="center" data-hoffset="100"
|
|
data-y="bottom" data-voffset="0"
|
|
data-customin="x:50;y:150;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0.5;scaleY:0.5;skewX:0;skewY:0;opacity:0;transformPerspective:0;transformOrigin:50% 50%;"
|
|
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="700"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 3"><img src="images/dummy.png" data-lazyload="images/woman.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption large_bold_grey skewfromrightshort customout"
|
|
data-x="80"
|
|
data-y="96"
|
|
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="500"
|
|
data-start="800"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 4">Faster
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption medium_thin_grey skewfromleftshort customout"
|
|
data-x="285"
|
|
data-y="122"
|
|
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="500"
|
|
data-start="900"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 5">&
|
|
</div>
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption medium_thin_grey skewfromrightshort customout"
|
|
data-x="80"
|
|
data-y="175"
|
|
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="300"
|
|
data-start="1000"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 6">More
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption large_bold_grey skewfromleftshort customout"
|
|
data-x="175"
|
|
data-y="152"
|
|
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="300"
|
|
data-start="1100"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 7">Powerful
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption small_thin_grey customin customout"
|
|
data-x="80"
|
|
data-y="240"
|
|
data-customin="x:0;y:100;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:3;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:0% 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="500"
|
|
data-start="1300"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 8">Slider Revolution is the highly acclaimed<br/> slide-based displaying solution, thousands of<br/> businesses, theme developers and everyday<br/> people use and love!
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption skewfromrightshort customout"
|
|
data-x="816"
|
|
data-y="207"
|
|
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="500"
|
|
data-start="1750"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 9"><img src="images/dummy.png" data-lazyload="images/graph.png" alt="" data-ww="52" data-hh="44">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption large_bold_darkblue skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="60"
|
|
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="500"
|
|
data-start="1600"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 10">1000's
|
|
</div>
|
|
|
|
<!-- LAYER NR. 10 -->
|
|
<div class="tp-caption medium_bg_darkblue skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="125"
|
|
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="500"
|
|
data-start="1650"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 11">Of Happy Users
|
|
</div>
|
|
|
|
<!-- LAYER NR. 11 -->
|
|
<div class="tp-caption medium_bold_red skewfromrightshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="200"
|
|
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="500"
|
|
data-start="1800"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 12">Rekord Breaking
|
|
</div>
|
|
|
|
<!-- LAYER NR. 12 -->
|
|
<div class="tp-caption medium_light_red skewfromrightshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="center" data-voffset="-10"
|
|
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="500"
|
|
data-start="1850"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 13">Sales on CodeCanyon
|
|
</div>
|
|
|
|
<!-- LAYER NR. 13 -->
|
|
<div class="tp-caption medium_bg_red skewfromrightshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-200"
|
|
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="500"
|
|
data-start="1900"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 14">A Professional Solution
|
|
</div>
|
|
|
|
<!-- LAYER NR. 14 -->
|
|
<div class="tp-caption medium_bold_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="340"
|
|
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="500"
|
|
data-start="2000"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 15">4.7<span style="font-weight:300;">/5 Stars</span>
|
|
</div>
|
|
|
|
<!-- LAYER NR. 15 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-103"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="2050"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 16"><img src="images/dummy.png" data-lazyload="images/star.png" alt="" data-ww="20" data-hh="20">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 16 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="right" data-hoffset="-115"
|
|
data-y="bottom" data-voffset="-103"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="2100"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 17"><img src="images/dummy.png" data-lazyload="images/star.png" alt="" data-ww="20" data-hh="20">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 17 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="right" data-hoffset="-140"
|
|
data-y="bottom" data-voffset="-103"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="2150"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 18"><img src="images/dummy.png" data-lazyload="images/star.png" alt="" data-ww="20" data-hh="20">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 18 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="right" data-hoffset="-165"
|
|
data-y="bottom" data-voffset="-103"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="2200"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 19"><img src="images/dummy.png" data-lazyload="images/star.png" alt="" data-ww="20" data-hh="20">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 19 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="right" data-hoffset="-190"
|
|
data-y="bottom" data-voffset="-103"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="2250"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 20"><img src="images/dummy.png" data-lazyload="images/star.png" alt="" data-ww="20" data-hh="20">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 20 -->
|
|
<div class="tp-caption medium_bg_orange skewfromleftshort customout"
|
|
data-x="right" data-hoffset="-90"
|
|
data-y="bottom" data-voffset="-50"
|
|
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="500"
|
|
data-start="2300"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 21">Customer Rating
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/darkblurbg.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption customin"
|
|
data-x="474"
|
|
data-y="189"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="800"
|
|
data-easing="Power3.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 2"><img src="images/dummy.png" data-lazyload="images/macbook2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption customin"
|
|
data-x="245"
|
|
data-y="92"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="500"
|
|
data-easing="Power3.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 3"><img src="images/dummy.png" data-lazyload="images/imac1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption customin"
|
|
data-x="693"
|
|
data-y="69"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="1300"
|
|
data-easing="Power3.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 4"><img src="images/dummy.png" data-lazyload="images/lupe_macbook.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption customin"
|
|
data-x="100"
|
|
data-y="171"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="500"
|
|
data-start="1400"
|
|
data-easing="Power3.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 5"><img src="images/dummy.png" data-lazyload="images/lupe_imac.png" alt="">
|
|
</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="1500"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 6">Caption Selection
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption medium_bg_red skewfromright customout"
|
|
data-x="820"
|
|
data-y="274"
|
|
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="1700"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 7">Custom Animation Editor
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption medium_bg_orange skewfromright customout"
|
|
data-x="820"
|
|
data-y="314"
|
|
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="1800"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 8">With Live Preview
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption medium_bg_darkblue skewfromleft customout"
|
|
data-x="168"
|
|
data-y="193"
|
|
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="1600"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 9">With Style Preview
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption large_bold_white customin customout"
|
|
data-x="428"
|
|
data-y="34"
|
|
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="600"
|
|
data-start="1100"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
style="z-index: 10">Big
|
|
</div>
|
|
|
|
<!-- LAYER NR. 10 -->
|
|
<div class="tp-caption medium_light_white customin customout"
|
|
data-x="536"
|
|
data-y="51"
|
|
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="600"
|
|
data-start="1200"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-endeasing="Power1.easeIn"
|
|
style="z-index: 11">Improvements
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="slidedown" data-slotamount="7" data-masterspeed="1000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/transparent.png" style='background-color:#b2c4cc' alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption customin skewtoleft"
|
|
data-x="877"
|
|
data-y="54"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 2"><img src="images/dummy.png" data-lazyload="images/cloud2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption customin skewtoleft"
|
|
data-x="84"
|
|
data-y="80"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1300"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 3"><img src="images/dummy.png" data-lazyload="images/cloud3.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption customin skewtoleft"
|
|
data-x="473"
|
|
data-y="123"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1700"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 4"><img src="images/dummy.png" data-lazyload="images/cloud1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption sfb ltl"
|
|
data-x="639"
|
|
data-y="346"
|
|
data-speed="600"
|
|
data-start="1200"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 5"><img src="images/dummy.png" data-lazyload="images/hill3.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption sfb ltl"
|
|
data-x="228"
|
|
data-y="360"
|
|
data-speed="600"
|
|
data-start="1100"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 6"><img src="images/dummy.png" data-lazyload="images/hill4.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption grassfloor lfb ltb"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="bottom" data-voffset="50"
|
|
data-speed="600"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="600"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 7">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption sfb ltl"
|
|
data-x="142"
|
|
data-y="375"
|
|
data-speed="600"
|
|
data-start="800"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 8"><img src="images/dummy.png" data-lazyload="images/hill2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption sfb ltl"
|
|
data-x="496"
|
|
data-y="367"
|
|
data-speed="600"
|
|
data-start="900"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 9"><img src="images/dummy.png" data-lazyload="images/hill1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption sfb ltl"
|
|
data-x="918"
|
|
data-y="379"
|
|
data-speed="600"
|
|
data-start="1000"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 10"><img src="images/dummy.png" data-lazyload="images/hill2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 10 -->
|
|
<div class="tp-caption lfb skewtoleft"
|
|
data-x="122"
|
|
data-y="133"
|
|
data-speed="2000"
|
|
data-start="1300"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Power1.easeIn"
|
|
style="z-index: 11"><img src="images/dummy.png" data-lazyload="images/guy1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 11 -->
|
|
<div class="tp-caption lfb skewtoleft"
|
|
data-x="318"
|
|
data-y="91"
|
|
data-speed="2000"
|
|
data-start="1400"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Power1.easeIn"
|
|
style="z-index: 12"><img src="images/dummy.png" data-lazyload="images/guy2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 12 -->
|
|
<div class="tp-caption customin ltl"
|
|
data-x="769"
|
|
data-y="177"
|
|
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-speed="1000"
|
|
data-start="2000"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 13"><img src="images/dummy.png" data-lazyload="images/icon_photo.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 13 -->
|
|
<div class="tp-caption large_bold_white customin ltl"
|
|
data-x="596"
|
|
data-y="101"
|
|
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-speed="1000"
|
|
data-start="1850"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 14">Design
|
|
</div>
|
|
|
|
<!-- LAYER NR. 14 -->
|
|
<div class="tp-caption medium_light_white customin ltl"
|
|
data-x="813"
|
|
data-y="124"
|
|
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-speed="1000"
|
|
data-start="1900"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 15">&
|
|
</div>
|
|
|
|
<!-- LAYER NR. 15 -->
|
|
<div class="tp-caption large_bold_white customin ltl"
|
|
data-x="845"
|
|
data-y="102"
|
|
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-speed="1000"
|
|
data-start="1950"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 16">Create
|
|
</div>
|
|
|
|
<!-- LAYER NR. 16 -->
|
|
<div class="tp-caption mediumlarge_light_white customin ltl"
|
|
data-x="652"
|
|
data-y="282"
|
|
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-speed="1000"
|
|
data-start="2050"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="400"
|
|
data-endeasing="Back.easeIn"
|
|
style="z-index: 17">With Total Layer Control
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="slideleft" data-slotamount="7" data-masterspeed="2000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/transparent.png" style='background-color:#b2c4cc' alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="889"
|
|
data-y="118"
|
|
data-speed="600"
|
|
data-start="1000"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
style="z-index: 2"><img src="images/dummy.png" data-lazyload="images/cloud2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="339"
|
|
data-y="67"
|
|
data-speed="600"
|
|
data-start="1100"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
style="z-index: 3"><img src="images/dummy.png" data-lazyload="images/cloud3.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="12"
|
|
data-y="181"
|
|
data-speed="600"
|
|
data-start="1200"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
style="z-index: 4"><img src="images/dummy.png" data-lazyload="images/cloud1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="120"
|
|
data-y="352"
|
|
data-speed="600"
|
|
data-start="900"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 5"><img src="images/dummy.png" data-lazyload="images/hill3.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="696"
|
|
data-y="377"
|
|
data-speed="600"
|
|
data-start="800"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 6"><img src="images/dummy.png" data-lazyload="images/hill4.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption grassfloor lfb ltr"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="bottom" data-voffset="50"
|
|
data-speed="600"
|
|
data-start="0"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="600"
|
|
data-endeasing="Power4.easeIn"
|
|
data-captionhidden="on"
|
|
style="z-index: 7">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="464"
|
|
data-y="382"
|
|
data-speed="600"
|
|
data-start="500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 8"><img src="images/dummy.png" data-lazyload="images/hill2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="-59"
|
|
data-y="366"
|
|
data-speed="600"
|
|
data-start="600"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 9"><img src="images/dummy.png" data-lazyload="images/hill1.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption lfr"
|
|
data-x="857"
|
|
data-y="386"
|
|
data-speed="600"
|
|
data-start="700"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 10"><img src="images/dummy.png" data-lazyload="images/hill2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 10 -->
|
|
<div class="tp-caption large_bold_white customin customout"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="80"
|
|
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="1700"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 11">Timelined Captions
|
|
</div>
|
|
|
|
<!-- LAYER NR. 11 -->
|
|
<div class="tp-caption mediumlarge_light_white_center customin customout"
|
|
data-x="center" data-hoffset="0"
|
|
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="1900"
|
|
data-easing="Back.easeInOut"
|
|
data-endspeed="300"
|
|
style="z-index: 12">Create Custom Animations<br/>
|
|
with our Brand-New<br/>
|
|
Transition Builder
|
|
</div>
|
|
|
|
<!-- LAYER NR. 12 -->
|
|
<div class="tp-caption customin"
|
|
data-x="110"
|
|
data-y="118"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="300"
|
|
data-start="1300"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
data-captionhidden="on"
|
|
style="z-index: 13"><img src="images/dummy.png" data-lazyload="images/tree.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 13 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="bottom" data-voffset="-250"
|
|
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="1800"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="300"
|
|
style="z-index: 14"><img src="images/dummy.png" data-lazyload="images/clock2.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 14 -->
|
|
<div class="tp-caption customin skewtoright"
|
|
data-x="817"
|
|
data-y="197"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="1000"
|
|
data-start="2000"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="600"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 15"><img src="images/dummy.png" data-lazyload="images/guy3.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 15 -->
|
|
<div class="tp-caption customin skewtoright"
|
|
data-x="946"
|
|
data-y="155"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="1000"
|
|
data-start="2100"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="600"
|
|
data-endeasing="Power4.easeIn"
|
|
style="z-index: 16"><img src="images/dummy.png" data-lazyload="images/guy4.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 16 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="126"
|
|
data-y="269"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1800"
|
|
data-easing="Back.easeOut"
|
|
data-end="4400"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 17"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 17 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="167"
|
|
data-y="303"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1500"
|
|
data-easing="Back.easeOut"
|
|
data-end="4100"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 18"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 18 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="264"
|
|
data-y="304"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1600"
|
|
data-easing="Back.easeOut"
|
|
data-end="4200"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 19"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 19 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="296"
|
|
data-y="250"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1700"
|
|
data-easing="Back.easeOut"
|
|
data-end="4300"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 20"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 20 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="223"
|
|
data-y="263"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1400"
|
|
data-easing="Back.easeOut"
|
|
data-end="4000"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 21"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 21 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="166"
|
|
data-y="256"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="1900"
|
|
data-easing="Back.easeOut"
|
|
data-end="4500"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 22"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 22 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="118"
|
|
data-y="219"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="2000"
|
|
data-easing="Back.easeOut"
|
|
data-end="4600"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 23"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 23 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="251"
|
|
data-y="208"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:0;scaleY:0;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-customout="x:0;y:180;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="600"
|
|
data-start="2100"
|
|
data-easing="Back.easeOut"
|
|
data-end="4700"
|
|
data-endspeed="600"
|
|
data-endeasing="Bounce.easeOut"
|
|
data-captionhidden="on"
|
|
style="z-index: 24"><img src="images/dummy.png" data-lazyload="images/apple.png" alt="">
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="zoomin" data-slotamount="7" data-masterspeed="600" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/videobg1.jpg" alt="videobg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption medium_bg_darkblue sfr customout"
|
|
data-x="129"
|
|
data-y="88"
|
|
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="500"
|
|
data-start="1600"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 2">Extensive Video Support
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption medium_bg_red sfr customout"
|
|
data-x="293"
|
|
data-y="130"
|
|
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="500"
|
|
data-start="1700"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 3">Youtube
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption medium_bg_red sfr customout"
|
|
data-x="314"
|
|
data-y="173"
|
|
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="500"
|
|
data-start="1800"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 4">Vimeo
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption medium_bg_red sfr customout"
|
|
data-x="184"
|
|
data-y="216"
|
|
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="500"
|
|
data-start="1900"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 5">Self-Hosted HTML 5
|
|
</div>
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption medium_bg_orange sfr customout"
|
|
data-x="90"
|
|
data-y="357"
|
|
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="500"
|
|
data-start="2200"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 6">Next Slide: Full Screen Video
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption sft customout"
|
|
data-x="399"
|
|
data-y="385"
|
|
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="1500"
|
|
data-easing="Back.easeOut"
|
|
data-endspeed="500"
|
|
data-captionhidden="on"
|
|
style="z-index: 7"><img src="images/dummy.png" data-lazyload="images/videoshadow.png" alt="">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption customin customout"
|
|
data-x="center" data-hoffset="134"
|
|
data-y="center" data-voffset="-6"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
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="600"
|
|
data-start="1000"
|
|
data-easing="Power4.easeOut"
|
|
data-endspeed="500"
|
|
data-endeasing="Power4.easeOut"
|
|
data-autoplay="false"
|
|
data-autoplayonlyfirsttime="false"
|
|
style="z-index: 8"><iframe src='http://player.vimeo.com/video/76512663?title=0&byline=0&portrait=0;api=1' width='640' height='360' style='width:640px;height:360px;'></iframe>
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/dummy.png" data-lazyload="images/transparent.png" alt="" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption customin fullscreenvideo"
|
|
data-x="0"
|
|
data-y="0"
|
|
data-customin="x:0;y:0;z:0;rotationX:0;rotationY:0;rotationZ:0;scaleX:5;scaleY:5;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 50%;"
|
|
data-speed="700"
|
|
data-start="500"
|
|
data-easing="Power4.easeInOut"
|
|
data-endspeed="700"
|
|
data-autoplay="false"
|
|
data-autoplayonlyfirsttime="false"
|
|
style="z-index: 2"><iframe src='http://player.vimeo.com/video/76995667?title=0&byline=0&portrait=0;api=1' width='100%' height='100%' style='width:100%px;height:100%px;'></iframe>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tp-bannertimer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- THE SCRIPT INITIALISATION -->
|
|
<!-- LOOK THE DOCUMENTATION FOR MORE INFORMATIONS -->
|
|
<script type="text/javascript">
|
|
|
|
var revapi;
|
|
|
|
jQuery(document).ready(function() {
|
|
|
|
revapi = jQuery('.tp-banner').revolution(
|
|
{
|
|
delay:9000,
|
|
startwidth:1170,
|
|
startheight:500,
|
|
hideThumbs:10,
|
|
lazyLoad:"on"
|
|
|
|
});
|
|
|
|
}); //ready
|
|
|
|
</script>
|
|
|
|
<!-- END REVOLUTION SLIDER -->
|
|
|
|
|
|
</article><!-- Content End -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- HERE COMES ONLY THE DEMO INFORMATION, NO NEED TO CARE ABOUT IT -->
|
|
|
|
<section class="container">
|
|
<h2>How to activate the lazy loading ?</h2>
|
|
<p>In such situation it is better to activate the Lazy Loading option to load the images first when they really should be shown in the slider. Lazy Loading is only available for the Main images in the current version.Follow the steps to actiavet Lazy Loading</p>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3>Use blank images as sources instead of the original Images, and use the data-lazyload parameter:</h3>
|
|
|
|
<pre>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<!-- MAIN IMAGE -->
|
|
<img <strong>src="images/dummy.png" data-lazyload="images/slidebg1.jpg"</strong> alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
...
|
|
</pre>
|
|
<div style="width:100%; height:20px"></div>
|
|
<h3> Initialise the Plugin somewhere in the Body Footer:</h3>
|
|
<pre>
|
|
<script type="text/javascript">
|
|
|
|
var revapi;
|
|
|
|
jQuery(document).ready(function() {
|
|
|
|
revapi = jQuery('.tp-banner').revolution(
|
|
{
|
|
delay:9000,
|
|
startwidth:1170,
|
|
startheight:500,
|
|
hideThumbs:10,
|
|
<strong>lazyLoad:"on"</strong>
|
|
|
|
});
|
|
|
|
}); //ready
|
|
|
|
</script>
|
|
</pre>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |