Презентация нового продукта (слайдер)

Чтобы привлечь покупателей к покупке нового продукта, нужно его красиво подать и рассказать о нём всё самое важное. И чтобы усилить эффект и придать уникальности мы сегодня сделаем необычный слайдер.

Будем использовать помимо 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">&lt;</a>
<a id="arrowRight" class="arrow">&gt;</a>

Контейнер #impress содержит наши будущие слайды. И судя по названию, можно предположить, что по этому ID обращается impress.js.
Завершают код, две стрелки влево и вправо.
Каждый слайд нашей презентации состоит из трех элементов: заголовок, параграфа с текстом и изображения (коммуникатора). Все они расположены в определенном положении на каждом слайде.
Элементы слайдов сгруппированы в индивиуальные 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;
}

Далее пример стиля для первого слайда (другие смотрите в styles.css):

#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>

И подключаем файл script.js:

$(function(){
    
    var imp = impress();
    
    $('#arrowLeft').click(function(e){
        imp.prev();
        e.preventDefault();
    });
    
    $('#arrowRight').click(function(e){
        imp.next();
        e.preventDefault();
    });
});