Презентация нового продукта (слайдер)
Чтобы привлечь покупателей к покупке нового продукта, нужно его красиво подать и рассказать о нём всё самое важное. И чтобы усилить эффект и придать уникальности мы сегодня сделаем необычный слайдер.
Будем использовать помимо jQuery, небольшую библиотеку impress.js позволяющую легко создавать интересные CSS3 презентации.
HTML
<div id="impress" class="impress-not-supported">
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Sony Xperia™ S</h2>
<p>Обновление до Android 4.0<br /> 4,3-дюймовый сенсорный TFT-экран<br /> Двухъядерный процессор Qualcomm 1,5 ГГц<br /> Флеш-память: 32 ГБ eMMC<br /> 12,1 Мп камера с автофокусировкой</p>
<img src="assets/img/1.png" width="252" height="458" alt="Sony Experia S" />
</div>
<div id="game" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Играйте</h2>
<p>На смартфоне Xperia S установлен целый ряд интересных игр. Хочется большего? Смартфон Xperia S получил сертификацию PlayStation®, а значит, может предложить развлечения на любой вкус: столько игр вы еще не видели!</p>
<img src="assets/img/2.png" width="481" height="231" alt="Sony Experia S" />
</div>
<div id="look" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Смотрите</h2>
<p>Новейшие голливудские блокбастеры и телепередачи в приложении Video Unlimited от Sony Entertainment Network. Или ваши собственные видео в HD-качестве. С Xperia вы можете просматривать видеозаписи на любом экране.</p>
<img src="assets/img/3.png" width="620" height="270" alt="Sony Experia S" />
</div>
<div id="design" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Дизайн</h2>
<p>«Мне кажется, если наши продукты расширяют возможности людей, это прекрасно», — говорит Давид де Леон, директор отдела интерактивных разработок.</p>
<img src="assets/img/4.png" width="393" height="493" alt="Sony Experia S" />
</div>
<div id="camera" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Ловите момент!</h2>
<p>Перевести смартфон из режима ожидания в режим съемки можно одним нажатием клавиши — на это уйдет чуть больше секунды. Благодаря 12-мегапиксельной камере смартфона Xperia S вы больше не упустите ни одного стоящего кадра.</p>
<img src="assets/img/5.png" width="460" height="230" alt="Sony Experia S" />
</div>
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>Завершают код, две стрелки влево и вправо.
Каждый слайд нашей презентации состоит из трех элементов: заголовок, параграфа с текстом и изображения (коммуникатора). Все они расположены в определенном положении на каждом слайде.
Элементы слайдов сгруппированы в индивиуальные DIV-ы с классом "step" внутри контейнера #impress. Основа для impress.js готова.
Использование impress.js
Благодаря маленькой библиотеке impress мы можем создать плавные CSS3 переходы между слайдами в нашей презентации. Для этого мы должны рассказать impress.js о том, как мы хотим ориентировать слайды. Рассказывать будем с помощью атрибутов к DIV-ам с классом "step". Атрибуты будут преобразовываться в библиотеке impress.js в реальные CSS3 свойства, в зависимости от браузера, и применяться к текущему слайду.
Impress.js поддерживает такие атрибуты:
- data-x, data-y, data-z - позволяет перемещать слайды на экране в 3D пространстве;
- data-rotate, data-rotate-x, data-rotate-y - поворот элемента вокруг определенной оси (в градусах);
- data-scale - увеличение или уменьшение масштаба слайда.
Разметку и атрибуты слайдов вы видели чуть выше.
В итоге получаем очень привлекательную презентацию продукта, но править атрибуты, конечно придется вам вручную и инивидуально для каждого слайда.
CSS
Общие стили для презентации:
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font: normal 44px/1.5 sans-serif;
color:#444648;
position:absolute;
z-index:10;
}
#impress p{
font: normal 18px/1.3 sans-serif;
color:#27333f;
position:absolute;
z-index:10;
}
#impress img{
position:absolute;
z-index:1;
}#impress #intro{
width: 500px;
}
#intro h2{
text-align: center;
width: 100%;
}
#intro p{
font-size: 20px;
left: 290px;
line-height: 1.6;
top: 220px;
white-space: nowrap;
}
#intro img{
top: 100px;
}JS
В конце документа подключаем jQuery, который не нужен для работы impress.js, но нужен для осуществления кликов по стрелкам и листания слайдов.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="assets/js/impress.js"></script>$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
