Файл: dist/shadows-template.html
Строк: 109
<?php
<!doctype html><html lang=en><base href=/ ><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1"><title>Bee3D Slider</title><meta name=HandheldFriendly content=True><meta name=MobileOptimized content=320><meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><meta http-equiv=cleartype content=on><link href="http://fonts.googleapis.com/css?family=Ubuntu:500" rel=stylesheet><link href="http://fonts.googleapis.com/css?family=Oxygen:700,400" rel=stylesheet><link rel=stylesheet href=css/bee3D.css><link rel=stylesheet href=css/demo.css><div class=intro-text><h1>Shadows: Custom Template</h1></div><style>.custom--shadow-wrapper {
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100px;
}
.custom--shadow span {
display: block;
content: '';
left: 0;
width: 100%;
height: 200px;
border-radius: 50%;
background: #f36f56;
box-shadow: 0 0 10px 50px #f36f56;
-webkit-transition: opacity 1.5s;
transition: opacity 1.5s;
opacity: 0.4;
-webkit-transform: rotateX(95deg) translateZ(30px) scale(.55);
transform: rotateX(95deg) translateZ(30px) scale(.55);
}</style><article class=example><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>1</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>2</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>3</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>4</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>5</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>6</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>7</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>8</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>9</div></section><section class=bee3D--slide><div class=bee3D--inner><p class=demo-text>10</div></section><span class="bee3D--nav bee3D--nav__prev"></span> <span class="bee3D--nav bee3D--nav__next"></span></article><a id=lukeed href=http://www.lukeed.com rel=follow target=_blank>LUKE'ED DESIGN<span></span></a><script src=js/vendor/classie.js></script><script src=js/bee3D.js></script><script>var element = document.querySelector('.example');
var slider = new Bee3D(element, {
effect: 'wave',
listeners: {
keys: true
},
navigation: {
enabled: true
},
shadows: {
enabled: true,
template: [
'<div class="custom--shadow-wrapper">',
'<div class="custom--shadow">',
'<span></span>',
'</div>',
'</div>'
].join('')
}
});</script>
?>