mirror of
https://gitee.com/coder-xiaomo/flashsale
synced 2025-09-12 23:11:38 +08:00
1626 lines
63 KiB
HTML
1626 lines
63 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 href="02.Sample-Fullwidth.html">Next Guide <i class="revicon-right-open"></i> </a></article>-->
|
|
<article class="prevnext">
|
|
<a class="active" 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/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/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/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/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/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/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/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/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="fade" data-slotamount="7" data-masterspeed="1000" data-delay="13000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/newslide2014_1.jpg" alt="newslide2014_1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption finewide_large_white customin customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="-40"
|
|
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: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-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">INTRODUCING
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption whitedivider3px customin customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="0"
|
|
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: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="700"
|
|
data-start="800"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption finewide_medium_white randomrotate customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="30"
|
|
data-customout="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-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">BRAND NEW FEATURES
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption boldwide_small_white customin customout tp-resizeme"
|
|
data-x="240"
|
|
data-y="120"
|
|
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: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="5000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;"><strong>animate</strong>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption whitedivider3px_vertical customin tp-resizeme"
|
|
data-x="420"
|
|
data-y="110"
|
|
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="5500"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="300"
|
|
style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption finewide_small_white randomrotate customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="120"
|
|
data-customout="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="6400"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">CHARACTERS
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption finewide_small_white customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="160"
|
|
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: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="7200"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="words"
|
|
data-splitout="words"
|
|
data-elementdelay="0.12"
|
|
data-endelementdelay="0.12"
|
|
data-endspeed="300"
|
|
style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">SINGLE WORDS
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption finewide_small_white customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="200"
|
|
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: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="8000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">LINES
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption finewide_verysmall_white_mw customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="250"
|
|
data-customin="x:0;y:50;z:0;rotationX:-120;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 0%;"
|
|
data-customout="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="900"
|
|
data-start="8000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="lines"
|
|
data-splitout="lines"
|
|
data-elementdelay="0.2"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 10; max-width: auto; max-height: auto; white-space: nowrap;">Lorem ipsum dolor sit amet, consetetur<br/> sadipscing elitr, sed diam nonumy<br/> eirmod tempor invidunt ut labore et<br/> dolore magna aliquyam erat, sed diam <br/> voluptua. At vero eos et accusam.
|
|
</div>
|
|
|
|
|
|
</li>
|
|
|
|
<!-- SLIDE -->
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1000" data-delay="13000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/newslide2014_1.jpg" alt="newslide2014_1" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
|
|
<!-- LAYERS -->
|
|
|
|
<!-- LAYER NR. 1 -->
|
|
<div class="tp-caption finewide_large_white customin customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="-40"
|
|
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: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-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 2; max-width: auto; max-height: auto; white-space: nowrap;">INTRODUCING
|
|
</div>
|
|
|
|
<!-- LAYER NR. 2 -->
|
|
<div class="tp-caption whitedivider3px customin customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="0"
|
|
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: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="700"
|
|
data-start="800"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 3; max-width: auto; max-height: auto; white-space: nowrap;">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 3 -->
|
|
<div class="tp-caption finewide_medium_white randomrotate customout tp-resizeme"
|
|
data-x="center" data-hoffset="0"
|
|
data-y="center" data-voffset="30"
|
|
data-customout="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-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-end="4000"
|
|
data-endspeed="500"
|
|
style="z-index: 4; max-width: auto; max-height: auto; white-space: nowrap;">BRAND NEW FEATURES
|
|
</div>
|
|
|
|
<!-- LAYER NR. 4 -->
|
|
<div class="tp-caption boldwide_small_white customin customout tp-resizeme"
|
|
data-x="240"
|
|
data-y="120"
|
|
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: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="5000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;"><strong>animate</strong>
|
|
</div>
|
|
|
|
<!-- LAYER NR. 5 -->
|
|
<div class="tp-caption whitedivider3px_vertical customin tp-resizeme"
|
|
data-x="420"
|
|
data-y="110"
|
|
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="5500"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.1"
|
|
data-endelementdelay="0.1"
|
|
data-endspeed="300"
|
|
style="z-index: 6; max-width: auto; max-height: auto; white-space: nowrap;">
|
|
</div>
|
|
|
|
<!-- LAYER NR. 6 -->
|
|
<div class="tp-caption finewide_small_white randomrotate customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="120"
|
|
data-customout="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="6400"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="chars"
|
|
data-splitout="chars"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 7; max-width: auto; max-height: auto; white-space: nowrap;">CHARACTERS
|
|
</div>
|
|
|
|
<!-- LAYER NR. 7 -->
|
|
<div class="tp-caption finewide_small_white customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="160"
|
|
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: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="7200"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="words"
|
|
data-splitout="words"
|
|
data-elementdelay="0.12"
|
|
data-endelementdelay="0.12"
|
|
data-endspeed="300"
|
|
style="z-index: 8; max-width: auto; max-height: auto; white-space: nowrap;">SINGLE WORDS
|
|
</div>
|
|
|
|
<!-- LAYER NR. 8 -->
|
|
<div class="tp-caption finewide_small_white customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="200"
|
|
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: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="8000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="none"
|
|
data-splitout="none"
|
|
data-elementdelay="0.08"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 9; max-width: auto; max-height: auto; white-space: nowrap;">LINES
|
|
</div>
|
|
|
|
<!-- LAYER NR. 9 -->
|
|
<div class="tp-caption finewide_verysmall_white_mw customin customout tp-resizeme"
|
|
data-x="460"
|
|
data-y="250"
|
|
data-customin="x:0;y:50;z:0;rotationX:-120;rotationY:0;rotationZ:0;scaleX:1;scaleY:1;skewX:0;skewY:0;opacity:0;transformPerspective:600;transformOrigin:50% 0%;"
|
|
data-customout="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="900"
|
|
data-start="8000"
|
|
data-easing="Power3.easeInOut"
|
|
data-splitin="lines"
|
|
data-splitout="lines"
|
|
data-elementdelay="0.2"
|
|
data-endelementdelay="0.08"
|
|
data-endspeed="300"
|
|
style="z-index: 10; max-width: auto; max-height: auto; white-space: nowrap;">Lorem ipsum dolor sit amet, consetetur<br/> sadipscing elitr, sed diam nonumy<br/> eirmod tempor invidunt ut labore et<br/> dolore magna aliquyam erat, sed diam <br/> voluptua. At vero eos et accusam.
|
|
</div>
|
|
|
|
</li>
|
|
|
|
|
|
<!-- SLIDE -->
|
|
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="images/darkblurbg.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="center center" 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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/apple.png" alt="">
|
|
</div>
|
|
</li>
|
|
<!-- SLIDE -->
|
|
<li data-transition="zoomin" data-slotamount="7" data-masterspeed="600" >
|
|
<!-- MAIN IMAGE -->
|
|
<img src="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/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/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
|
|
|
|
});
|
|
|
|
}); //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 build a Slider ?</h2>
|
|
<h3>Copy To the Header:</h3>
|
|
<pre>
|
|
<span style="color:#27ae60"><!-- get jQuery from the google apis --></span>
|
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.js"></script>
|
|
|
|
<span style="color:#27ae60"><!-- CSS STYLE--></span>
|
|
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />
|
|
|
|
<span style="color:#27ae60"><!-- SLIDER REVOLUTION 4.x SCRIPTS --></span>
|
|
<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>
|
|
|
|
<span style="color:#27ae60"><!-- SLIDER REVOLUTION 4.x CSS SETTINGS --></span>
|
|
<link rel="stylesheet" type="text/css" href="rs-plugin/css/settings.css" media="screen" />
|
|
</pre>
|
|
<div style="width:100%; height:40px"></div>
|
|
<h3> Create in the Document some Slider Markups like here:</h3>
|
|
<pre>
|
|
<span style="color:#27ae60"><!--
|
|
#################################
|
|
- THEMEPUNCH BANNER -
|
|
#################################
|
|
--></span>
|
|
<div class="tp-banner-container">
|
|
<div class="tp-banner" >
|
|
<ul>
|
|
<span style="color:#27ae60"><!-- SLIDE --></span>
|
|
<li data-transition="fade" data-slotamount="7" data-masterspeed="1500" >
|
|
<span style="color:#27ae60"><!-- MAIN IMAGE --></span>
|
|
<img src="images/slidebg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<span style="color:#27ae60"><!-- LAYERS --></span>
|
|
<span style="color:#27ae60"><!-- LAYER NR. 1 --></span>
|
|
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
|
|
data-x="85"
|
|
data-y="224"
|
|
data-speed="500"
|
|
data-start="1200"
|
|
data-easing="Power4.easeOut">My Caption
|
|
</div>
|
|
...
|
|
|
|
</li>
|
|
<span style="color:#27ae60"><!-- SLIDE --></span>
|
|
<li data-transition="zoomout" data-slotamount="7" data-masterspeed="1000" >
|
|
<span style="color:#27ae60"><!-- MAIN IMAGE --></span>
|
|
<img src="images/darkblurbg.jpg" alt="darkblurbg" data-bgfit="cover" data-bgposition="left top" data-bgrepeat="no-repeat">
|
|
<span style="color:#27ae60"><!-- LAYERS --></span>
|
|
<span style="color:#27ae60"><!-- LAYER NR. 1 --></span>
|
|
<div class="tp-caption lightgrey_divider skewfromrightshort fadeout"
|
|
data-x="85"
|
|
data-y="224"
|
|
data-speed="500"
|
|
data-start="1200"
|
|
data-easing="Power4.easeOut">My Caption
|
|
</div>
|
|
...
|
|
</li>
|
|
....
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</pre>
|
|
|
|
<div style="width:100%; height:40px"></div>
|
|
<h3> Initialise the Plugin somewhere in the Body Footer:</h3>
|
|
<pre>
|
|
<script type="text/javascript">
|
|
jQuery(document).ready(function() {
|
|
jQuery('.tp-banner').revolution(
|
|
{
|
|
delay:9000,
|
|
startwidth:1170,
|
|
startheight:500,
|
|
hideThumbs:10
|
|
});
|
|
});
|
|
</script>
|
|
</pre>
|
|
</section>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</body> |