You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
131 lines
26 KiB
131 lines
26 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>LayerSlider previous version 3D demo slider</title>
|
|
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
|
|
<link rel="stylesheet" href="../documentation/assets/css/doc.css">
|
|
<link rel="stylesheet" href="../documentation/assets/css/font.css">
|
|
<link href="http://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet" type="text/css">
|
|
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
|
|
<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
|
|
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
|
|
<!--[if lt IE 9]>
|
|
<script src="../documentation/assets/js/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- LayerSlider stylesheet -->
|
|
<link rel="stylesheet" href="../layerslider/css/layerslider.css" type="text/css">
|
|
<!-- External libraries: jQuery & GreenSock -->
|
|
<script src="../layerslider/js/jquery.js" type="text/javascript"></script>
|
|
<script src="../layerslider/js/greensock.js" type="text/javascript"></script>
|
|
<!-- LayerSlider script files -->
|
|
<script src="../layerslider/js/layerslider.transitions.js" type="text/javascript"></script>
|
|
<script src="../layerslider/js/layerslider.kreaturamedia.jquery.js" type="text/javascript"></script>
|
|
|
|
<style>
|
|
|
|
/*
|
|
You can add your custom layer styles
|
|
in the style attribute of the layer,
|
|
to a style element or
|
|
to an external css file
|
|
*/
|
|
|
|
#layerslider * {
|
|
font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body class="nobg">
|
|
<div id="slider-wrapper">
|
|
<div id="layerslider" class="ls-wp-container" style="width:1000px;height:500px;max-width:1280px;">
|
|
<div class="ls-slide" data-ls="slidedelay:7200;transition2d:all;transition3d:15;">
|
|
<img src="sliderimages/abyss-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:186px;left:701px;white-space: nowrap;" data-ls="offsetxin:right;durationin:50;easingin:linear;fadein:false;offsetxout:left;durationout:11000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-far.png" alt="Fish"><img class="ls-l" style="top:251px;left:857px;white-space: nowrap;" data-ls="offsetxin:right;durationin:50;easingin:linear;fadein:false;offsetxout:left;durationout:9000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-far.png" alt="Fish"><img class="ls-l" style="top:131px;left:358px;white-space: nowrap;" data-ls="offsetxin:right;durationin:3000;delayin:1000;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-mid.png" alt="Fishes"><img class="ls-l" style="top:196px;left:255px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:1000;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bg-fishes-mid.png" alt="Fishes"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:0;easingin:linear;offsetxout:0;durationout:0;easingout:linear;" src="sliderimages/abyss-bg-mask.png" alt="Abyss">
|
|
<h1 class="ls-l" style="top:30%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:50px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;offsetxout:0;durationout:2500;showuntil:1;">LayerSlider</h1>
|
|
<h1 class="ls-l" style="top:50%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:120px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:500;offsetxout:0;durationout:2500;showuntil:1;">3D</h1>
|
|
<h1 class="ls-l" style="top:70%;left:50%;text-shadow: 0px 0px 20px white; font-weight: normal;font-size:50px;color:white;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:1200;offsetxout:0;durationout:2500;showuntil:1;">demo slider</h1>
|
|
<img class="ls-l" style="top:20px;left:1000px;white-space: nowrap;" data-ls="offsetxin:left;durationin:6500;easingin:linear;fadein:false;offsetxout:right;durationout:0;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/shark.png" alt="Shark"><img class="ls-l" style="top:218px;left:481px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:2000;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:4000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-far.png" alt="Fish"><img class="ls-l" style="top:286px;left:646px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:3000;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:3000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-far.png" alt="Fish"><img class="ls-l" style="top:315px;left:325px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:2500;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:4000;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-mid.png" alt="Fish"><img class="ls-l" style="top:143px;left:695px;white-space: nowrap;" data-ls="offsetxin:right;durationin:4000;delayin:3500;easingin:easeOutQuad;fadein:false;offsetxout:left;durationout:2500;easingout:easeInExpo;fadeout:false;" src="sliderimages/small-fish-close.png" alt="Fish"><img class="ls-l" style="top:84px;left:458px;white-space: nowrap;" data-ls="offsetxin:right;durationin:3000;delayin:2800;easingin:linear;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/small-fish-mid.png" alt="Fish"><img class="ls-l" style="top:272px;left:685px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:3000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:3000;showuntil:1;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:70px;left:244px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:5300;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:2000;easingout:easeInExpo;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:200px;left:196px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:4000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:3000;showuntil:1;fadeout:false;" src="sliderimages/med-fish-mid.png" alt="Fish"><img class="ls-l" style="top:246px;left:339px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2400;delayin:5500;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:2000;easingout:easeInExpo;fadeout:false;" src="sliderimages/med-fish-close.png" alt="Fish"><img class="ls-l" style="top:12px;left:344px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:3300;easingin:easeOutCirc;fadein:false;offsetxout:left;durationout:3000;showuntil:1;easingout:easeInOutExpo;fadeout:false;" src="sliderimages/big-fish-close.png" alt="Fish"><img class="ls-l" style="top:194px;left:454px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2000;delayin:6000;easingin:easeOutExpo;fadein:false;offsetxout:left;durationout:1700;easingout:easeInExpo;fadeout:false;" src="sliderimages/big-fish-close.png" alt="Fish">
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:4500;transition2d:all;transition3d:36;timeshift:-1000;">
|
|
<img src="sliderimages/3d-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:20px;left:106px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:1;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:153px;left:342px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:700;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:276px;left:252px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:400;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:199px;left:585px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:950;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:37px;left:525px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:250;easingout:easeInBack;fadeout:false;" src="sliderimages/small-cube-blur.png" alt="Cube"><img class="ls-l" style="top:116px;left:86px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:1500;offsetxout:0;durationout:1500;" src="sliderimages/sayhello.png" alt="Say hello"><img class="ls-l" style="top:190px;left:135px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:50;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:100;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:340px;left:322px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:150;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:500;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:398px;left:587px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:300;easingout:easeInBack;fadeout:false;" src="sliderimages/mid-cube-blur.png" alt="Cube"><img class="ls-l" style="top:211px;left:16px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:100;easingin:easeOutElastic;fadein:false;offsetxout:right;durationout:1500;showuntil:300;easingout:easeInBack;fadeout:false;" src="sliderimages/big-cube.png" alt="Cube"><img class="ls-l" style="top:251px;left:746px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:3000;delayin:200;easingin:easeOutElastic;fadein:false;offsetxout:left;durationout:1500;showuntil:50;easingout:easeInBack;fadeout:false;" src="sliderimages/big-cube.png" alt="Cube">
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:5600;transition2d:all;transition3d:58,74;">
|
|
<img src="sliderimages/autumn-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2500;delayin:2500;offsetxout:0;durationout:1500;" src="sliderimages/summer-bg.jpg" alt="Spring"><img class="ls-l" style="top:9px;left:101px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-1.png" alt="Autumn Leaf"><img class="ls-l" style="top:210px;left:240px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:200;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-2.png" alt="Autumn Leaf"><img class="ls-l" style="top:193px;left:480px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:400;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-3.png" alt="Autumn Leaf"><img class="ls-l" style="top:311px;left:623px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:600;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-4.png" alt="Autumn Leaf"><img class="ls-l" style="top:407px;left:371px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:800;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-5.png" alt="Autumn Leaf"><img class="ls-l" style="top:232px;left:392px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:1000;easingin:easeOutQuint;fadein:false;rotatein:-360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-6.png" alt="Autumn Leaf"><img class="ls-l" style="top:190px;left:67px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:1200;easingin:easeOutQuint;fadein:false;rotatein:360;offsetxout:0;durationout:1000;showuntil:1000;" src="sliderimages/a-l-7.png" alt="Autumn Leaf"><img class="ls-l" style="top:9px;left:101px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2500;offsetxout:0;durationout:1500;" src="sliderimages/s-l-1.png" alt="Spring Leaf"><img class="ls-l" style="top:210px;left:240px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2700;offsetxout:0;durationout:1500;" src="sliderimages/s-l-2.png" alt="Spring Leaf"><img class="ls-l" style="top:193px;left:480px;white-space: nowrap;" data-ls="offsetxin:0;delayin:2900;offsetxout:0;durationout:1500;" src="sliderimages/s-l-3.png" alt="Spring Leaf"><img class="ls-l" style="top:311px;left:623px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3100;offsetxout:0;durationout:1500;" src="sliderimages/s-l-4.png" alt="Spring Leaf"><img class="ls-l" style="top:407px;left:371px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3300;offsetxout:0;durationout:1500;" src="sliderimages/s-l-5.png" alt="Spring Leaf"><img class="ls-l" style="top:232px;left:392px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3500;offsetxout:0;durationout:1500;" src="sliderimages/s-l-6.png" alt="Spring Leaf"><img class="ls-l" style="top:190px;left:67px;white-space: nowrap;" data-ls="offsetxin:0;delayin:3700;offsetxout:0;durationout:1500;" src="sliderimages/s-l-7.png" alt="Spring Leaf">
|
|
<p class="ls-l" style="top:83px;left:277px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:left;delayin:1000;fadein:false;offsetxout:left;durationout:1500;showuntil:2000;fadeout:false;">
|
|
The improve
|
|
</p>
|
|
<p class="ls-l" style="top:62px;left:451px;text-shadow: 0px 0px 10px white;font-size:60px;color:white;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2000;delayin:1500;easingin:easeOutElastic;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;showuntil:500;fadeout:false;">
|
|
is
|
|
</p>
|
|
<p class="ls-l" style="top:83px;left:503px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:right;delayin:1000;fadein:false;offsetxout:right;durationout:1500;showuntil:2000;fadeout:false;">
|
|
to change.
|
|
</p>
|
|
<p class="ls-l" style="top:137px;left:367px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:left;delayin:1750;fadein:false;offsetxout:left;durationout:1500;showuntil:1500;fadeout:false;">
|
|
To be perfect
|
|
</p>
|
|
<p class="ls-l" style="top:116px;left:555px;text-shadow: 0px 0px 10px white;font-size:60px;color:white;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:1500;delayin:2250;easingin:easeOutElastic;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;showuntil:500;fadeout:false;">
|
|
is
|
|
</p>
|
|
<p class="ls-l" style="top:137px;left:608px;text-shadow: 0px 0px 10px white;font-size:30px;color:white;white-space: nowrap;" data-ls="offsetxin:right;delayin:1750;fadein:false;offsetxout:right;durationout:1500;showuntil:1500;fadeout:false;">
|
|
to change often.
|
|
</p>
|
|
<p class="ls-l" style="top:198px;left:722px;text-shadow: 0px 0px 10px white; font-style: italic;font-size:20px;color:white;white-space: nowrap;" data-ls="offsetxin:0;delayin:2500;offsetxout:0;durationout:1500;showuntil:1000;">
|
|
- Winston Churchill
|
|
</p>
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:10050;transition2d:all;transition3d:68,69,77,78;">
|
|
<img src="sliderimages/cubes-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;easingin:easeInOutQuad;offsetxout:0;durationout:1000;easingout:easeInOutQuad;" src="sliderimages/cubes-blur.jpg" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:500;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5700;fadeout:false;" src="sliderimages/tile-1.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2500;delayin:600;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5100;fadeout:false;" src="sliderimages/tile-2.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2500;delayin:700;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5200;fadeout:false;" src="sliderimages/tile-3.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:left;durationin:2500;delayin:800;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5500;fadeout:false;" src="sliderimages/tile-4.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:900;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5500;fadeout:false;" src="sliderimages/tile-5.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:right;durationin:2500;delayin:1000;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4600;fadeout:false;" src="sliderimages/tile-6.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2500;delayin:1100;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:5100;fadeout:false;" src="sliderimages/tile-7.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:left;durationin:2500;delayin:1200;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4800;fadeout:false;" src="sliderimages/tile-8.png" alt="Tile"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:2500;delayin:1300;easingin:easeOutBack;fadein:false;offsetxout:left;durationout:1500;showuntil:4500;fadeout:false;" src="sliderimages/tile-9.png" alt="Tile">
|
|
<p class="ls-l" style="top:45px;left:30px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;delayin:1500;easingin:easeOutExpo;fadein:false;rotatein:-120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
|
|
200+ 2D & 3D transitions with Transition Builder!
|
|
</p>
|
|
<p class="ls-l" style="top:360px;left:450px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;delayin:3000;easingin:easeOutExpo;fadein:true;rotatein:-120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
|
|
Use with any HTML content including embedded videos!
|
|
</p>
|
|
<p class="ls-l" style="top:100px;left:505px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:right;delayin:4500;easingin:easeOutExpo;fadein:false;rotatein:120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
|
|
Responsive with Smart Resize & Touch-enabled!
|
|
</p>
|
|
<p class="ls-l" style="top:400px;left:10px;box-shadow: 0px 3px 10px -3px #002c4b; background: #02cef7; background: -moz-linear-gradient(top, #02cef7 0%, #009bba 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02cef7), color-stop(100%,#009bba)); background: -webkit-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -o-linear-gradient(top, #02cef7 0%,#009bba 100%); background: -ms-linear-gradient(top, #02cef7 0%,#009bba 100%); background: linear-gradient(to bottom, #02cef7 0%,#009bba 100%); text-shadow: 0px -1px 1px #00819c;padding-top:10px;padding-right:15px;padding-bottom:10px;padding-left:15px;border-top:4px solid white;font-family:Helvetica, Arial, sans-serif;font-size:20px;color:white;border-radius:7px;white-space: nowrap;" data-ls="offsetxin:left;delayin:6000;easingin:easeOutExpo;fadein:false;rotatein:120;offsetxout:0;durationout:1000;showuntil:2000;easingout:easeInQuart;scalexout:0.5;scaleyout:0.5;">
|
|
Multisite, Multi-language & Localization ready!
|
|
</p>
|
|
</div>
|
|
<div class="ls-slide" data-ls="slidedelay:6000;transition2d:all;transition3d:45,46,47,48,49,50;">
|
|
<img src="sliderimages/bbb-bg.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:-90px;left:500px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1000;easingin:easeInOutQuad;offsetxout:left;durationout:50000;showuntil:1;easingout:easeInQuad;fadeout:false;" src="sliderimages/bbb-clouds-far.png" alt="Clouds"><img class="ls-l" style="top:-60px;left:1000px;white-space: nowrap;" data-ls="offsetxin:right;durationin:0;delayin:10000;easingin:linear;fadein:false;offsetxout:left;durationout:40000;showuntil:1;easingout:linear;fadeout:false;" src="sliderimages/bbb-clouds-close.png" alt="Clouds"><img class="ls-l" style="top:0px;left:0px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:0;delayin:1000;easingin:linear;fadein:false;offsetxout:0;durationout:1500;easingout:linear;" src="sliderimages/bbb-bg-mask.png" alt="Mask">
|
|
<div class="ls-l" style="top:154px;left:465px;box-shadow: 0px 5px 35px -2px black;width:510px;height:291px;background:white;border-radius:2px;white-space: nowrap;" data-ls="offsetxin:right;durationin:1500;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;fadeout:false;">
|
|
</div>
|
|
<div class="ls-l" style="top:159px;left:470px;white-space: nowrap;" data-ls="offsetxin:right;durationin:1500;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:bottom;durationout:1500;fadeout:false;">
|
|
<iframe src="http://player.vimeo.com/video/79287693?title=0&byline=0&portrait=0&color=e4f000" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
|
|
</iframe>
|
|
</div>
|
|
<img class="ls-l" style="top:35px;left:715px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:top;durationin:1500;delayin:1500;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;fadeout:false;" src="sliderimages/easy.png" alt="Easy to embed"><img class="ls-l" style="top:37px;left:188px;white-space: nowrap;" data-ls="offsetxin:0;durationin:1500;delayin:5000;offsetxout:0;durationout:1500;" src="sliderimages/vfeatures.png" alt="Features"><img class="ls-l" style="top:304px;left:159px;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:bottom;durationin:2000;delayin:3000;easingin:easeOutBack;fadein:false;offsetxout:0;offsetyout:top;durationout:1500;fadeout:false;" src="sliderimages/bi-colored-butterfly-source_ijc.gif" alt="Butterfly"><img class="ls-l" style="top:119px;left:234px;white-space: nowrap;" data-ls="offsetxin:0;delayin:16000;offsetxout:0;durationout:1000;showuntil:2000;" src="sliderimages/acorn.png" alt="Acorn">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="example-wrapper">
|
|
<div id="example">
|
|
<section>
|
|
<h4>Previous version 3D demo slider</h4>
|
|
<p>
|
|
|
|
</p>
|
|
<p>
|
|
<a href="../documentation/documentation.html#slider-examples">back to examples</a>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initializing the slider -->
|
|
<script>
|
|
jQuery("#layerslider").layerSlider({
|
|
pauseOnHover: false,
|
|
skin: 'borderlessdark3d',
|
|
hoverBottomNav: true,
|
|
skinsPath: '../layerslider/skins/'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|