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.
109 lines
8.2 KiB
109 lines
8.2 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>LayerSlider full width 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: Lato, 'Open Sans', sans-serif;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body class="nobg">
|
|
<div id="full-slider-wrapper">
|
|
<div id="layerslider" style="width:100%;height:500px;">
|
|
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
|
|
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:280px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:300;delayin:500;offsetxout:0;offsetyout:-50;durationout:1000;showuntil:220;easingout:easeInOutQuart;scalexout:1.2;scaleyout:1.2;transformoriginout:50% top 0;" src="sliderimages/s1.png" alt=""><img class="ls-l" style="top:230px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:30;delayin:1720;scalexin:0.9;scaleyin:0.9;offsetxout:0;offsetyout:300;durationout:1000;scalexout:0.5;scaleyout:0.5;transformoriginout:50% bottom 0;" src="sliderimages/s2.png" alt=""><img class="ls-l" style="top:65%;left:50%;white-space: nowrap;" data-ls="offsetxin:0;offsetyin:250;durationin:950;delayin:500;offsetxout:0;offsetyout:-8;durationout:1000;showuntil:270;easingout:easeInOutQuart;scalexout:1.2;scaleyout:1.2;" src="sliderimages/s2.jpg" alt=""><img class="ls-l" style="top:195px;left:50%;white-space: nowrap;" data-ls="offsetxin:0;delayin:1720;easingin:easeInOutQuart;scalexin:0.7;scaleyin:0.7;offsetxout:-800;durationout:1000;" src="sliderimages/s1.jpg" alt="">
|
|
<p class="ls-l" style="top:150px;left:116px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#82d10c;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;">
|
|
FRESH FEATURES
|
|
</p>
|
|
<p class="ls-l" style="top:190px;left:125px;font-family:'Indie Flower';font-size:31px;color:#6db509;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-400;">
|
|
for starter
|
|
</p>
|
|
<img class="ls-l ls-linkto-3" style="top:460px;left:610px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;rotatein:-40;offsetxout:-50;rotateout:-40;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-2" style="top:460px;left:650px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;" src="sliderimages/right.png" alt="">
|
|
</div>
|
|
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
|
|
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:157px;left:284px;white-space: nowrap;" data-ls="offsetxin:300;durationin:2000;offsetxout:-300;parallaxlevel:-1;" src="sliderimages/l1.png" alt=""><img class="ls-l" style="top:20px;left:50%;white-space: nowrap;" data-ls="offsetxin:600;durationin:2000;offsetxout:-600;parallaxlevel:1;" src="sliderimages/l2.png" alt=""><img class="ls-l" style="top:37px;left:564px;white-space: nowrap;" data-ls="offsetxin:900;durationin:2000;offsetxout:-900;parallaxlevel:4;" src="sliderimages/l3.png" alt="">
|
|
<p class="ls-l" style="top:170px;left:174px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#f04705;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-200;durationout:1000;parallaxlevel:10;">
|
|
SPICY PARALLAX EFFECT
|
|
</p>
|
|
<p class="ls-l" style="top:210px;left:183px;font-family:'Indie Flower';font-size:31px;color:#f04705;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-400;parallaxlevel:8;">
|
|
for main course
|
|
</p>
|
|
<img class="ls-l ls-linkto-1" style="top:430px;left:210px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;offsetxout:-50;parallaxlevel:3;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-3" style="top:430px;left:250px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;parallaxlevel:3;" src="sliderimages/right.png" alt="">
|
|
</div>
|
|
<div class="ls-slide" data-ls="transition2d:1;timeshift:-1000;">
|
|
<img src="sliderimages/fw-1.jpg" class="ls-bg" alt="Slide background"/><img class="ls-l" style="top:129px;left:487px;white-space: nowrap;" data-ls="offsetxin:400;durationin:2000;offsetxout:400;" src="sliderimages/d1.png" alt=""><img class="ls-l" style="top:104px;left:70px;white-space: nowrap;" data-ls="offsetxin:-200;durationin:2000;offsetxout:-200;" src="sliderimages/d2.png" alt="">
|
|
<p class="ls-l" style="top:320px;left:830px;font-weight: 300;height:40px;padding-right:10px;padding-left:10px;font-size:30px;line-height:37px;color:#ffffff;background:#544f8c;border-radius:3px;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:1500;easingin:easeOutElastic;rotatexin:-90;transformoriginin:50% top 0;offsetxout:-400;durationout:1000;">
|
|
SWEET TRANSITIONS
|
|
</p>
|
|
<p class="ls-l" style="top:360px;left:836px;font-family:'Indie Flower';font-size:31px;color:#544f8c;white-space: nowrap;" data-ls="offsetxin:0;durationin:2000;delayin:2000;easingin:easeOutElastic;rotatexin:90;transformoriginin:50% top 0;offsetxout:-600;">
|
|
for dessert
|
|
</p>
|
|
<img class="ls-l ls-linkto-2" style="top:430px;left:960px;white-space: nowrap;" data-ls="offsetxin:-50;delayin:1000;offsetxout:-50;" src="sliderimages/left.png" alt=""><img class="ls-l ls-linkto-1" style="top:430px;left:1000px;white-space: nowrap;" data-ls="offsetxin:50;delayin:1000;offsetxout:50;" src="sliderimages/right.png" alt="">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="example-wrapper">
|
|
<div id="example">
|
|
<section>
|
|
<h4>Full width demo slider</h4>
|
|
<p>
|
|
A full width slider with three smart features:
|
|
</p>
|
|
<p>
|
|
<strong>Layers container:</strong> the pixel-positioned layers are always inside a centered (invisible) container element<br>
|
|
<strong>Responsive under:</strong> the slider will switch into responsive mode when the browser gets resized under a given value<br>
|
|
<strong>Parallax layers:</strong> Move your mouse over the second slide and and you will see a fancy real-time parallax effect!
|
|
</p>
|
|
<p>
|
|
<a href="../documentation/documentation.html#slider-examples">back to examples</a>
|
|
</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Initializing the slider -->
|
|
<script>
|
|
jQuery("#layerslider").layerSlider({
|
|
responsive: false,
|
|
responsiveUnder: 1280,
|
|
layersContainer: 1280,
|
|
skin: 'noskin',
|
|
hoverPrevNext: false,
|
|
skinsPath: '../layerslider/skins/'
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|