1 032 Страница, демонстрирующая товар потенциальному покупателю, должна содержать подробное описание его характеристик и фото. Она должна быть достаточно оригинальной, чтобы привлечь внимание посетителей.
В этом нам поможет новая компактная JavaScript библиотека.
А что если использовать impress.js не для обычных презентаций, а для чего-то другого? Это именно то, чем мы займёмся сегодня. Мы создадим необычную страницу для демонстрации продукции посетителям, используя немного магии CCS3! Здесь ваша видеореклама в интернете
HTML код
Начнём с создания простого HTML5 документа, который станет основой для сегодняшнего примера.
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title> <!-- Google Webfonts and our stylesheet --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" /> <link rel="stylesheet" href="assets/css/styles.css" /> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div id="impress" class="impress-not-supported"> <!-- The Slides Will Go Here --> </div> <a id="arrowLeft" class="arrow"><</a> <a id="arrowRight" class="arrow">></a> <!-- JavaScript includes --> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="assets/js/impress.js"></script> <script src="assets/js/script.js"></script> </body> </html> |
Здесь нет ничего необычного. Внутри тэга head помимо основных CSS-стилей (мы вернёмся к ним позже) мы подключаем ещё и Google Webfonts. А перед закрывающим тэгом body мы подключаем несколько JavaScript файлов.
Контейнер #impress будет содержать слайды. Идентификатор необходим для того, чтобы impress.js распознал этот контейнер (идентификатор можно изменить, но тогда придётся менять и значение параметра, принимаемого функцией impress в файле script.js). Далее в коде находятся стрелки, инициирующие переходы между слайдами.
В конце страницы, как я уже говорил, мы подключаем JavaScript файлы. impress.js — независимая библиотека и не требует jQuery для своей работы. Но мы всё же подключим его для того, чтобы отслеживать клики по стрелкам в нашем script.js файле.
В каждом слайде будет по 3 элемента: заголовок, параграф текста и изображение телефона. Все слайды будут расположены по-разному. Промо-изображения и текст для этого примера были взяты с сайта Google’s Galaxy Nexus.
Слайды сгруппированы в отдельные блоки внутри контейнера #impress. Этим самым мы положили основу для корректной работы impress.js.
Использование impress.js
Благодаря этой крохотной библиотеке и использованию CSS3, мы можем создать гладкие переходы между слайдами. Для этого нужно задать каждому слайду нужную ориентацию. Это несложно сделать. Мы будем использовать атрибуты data для блоков со слайдами. Библиотека преобразует эти атрибуты в CSS3 трансформации, а затем применяет их к каждому из слайдов, учитывая тип используемого браузера.
Impress.js поддерживает следующие атрибуты:
- data-x, data-y, data-z служат для перемещения слайдов на экране в трёх плоскостях;
- data-rotate, data-rotate-x, data-rotate-y нужны для того, чтобы повернуть элемент вокруг конкретной оси (задаётся в градусах);
- data-scale используется для уменьшения и увеличения размера слайда.
Ниже представлен HTML код для слайдов:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!-- The first slide retains its default position. We could omit the data attributes --> <div id="intro" class="step" data-x="0" data-y="0"> <h2>Introducing Galaxy Nexus</h2> <p>Android 4.0<br /> Super Amoled 720p Screen<br /> <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" /> </div> <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger --> <div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190"> <h2>Simplicity in Android 4.0</h2> <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p> <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" /> </div> <!-- Same for the rest.. --> <div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270"> <h2>Connect & Share</h2> <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p> <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" /> </div> <div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180"> <h2>Instant Upload</h2> <p>Your photos upload themselves with Instant Upload, which makes ..</p> <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" /> </div> <div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270"> <h2>Jam on with Google Music</h2> <p>Google Music makes discovery, purchase, and listening effortless and..</p> <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" /> </div> |
Во время слайд-шоу impress.js преобразует заданные атрибуты в CSS3 трансформации. В результате получиться приятная глазу и оригинальная презентация, которая дана в качестве примера. Для получения самых лучших результатов придётся вручную подстраивать значения этих атрибутов.
CSS код
Чтобы презентация корректно работала, мы установим нужные CSS правила. Сначала опишем основные стили для контейнера и его элементов.
assets/css/style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/*---------------------------- Styling the presentation -----------------------------*/ #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 'PT Sans Narrow', sans-serif; color:#444648; position:absolute; z-index:10; } #impress p{ font: normal 18px/1.3 'Open Sans', sans-serif; color:#27333f; position:absolute; z-index:10; } #impress img{ position:absolute; z-index:1; } |
Как Вы, наверное, заметили в стилях выше и в блоке с HTML разметкой в начале урока, контейнеру #impress назначен класс .impress-not-supported. Это класс удаляется только в том случае, если текущий браузер поддерживает необходимый функционал для корректной работы библиотеки.
А теперь зададим стили каждому конкретному слайду. В качестве примера приведем фрагмент кода только для первого слайда, а остальные стили Вы найдёте в assets/css/styles.css.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
/*---------------------------- Slide 1 - Intro -----------------------------*/ #impress #intro{ width: 500px; } #intro h2{ text-align: center; width: 100%; } #intro p{ font-size: 22px; left: 290px; line-height: 1.6; top: 220px; white-space: nowrap; } #intro img{ top: 120px; } |
Осталось только инициализировать библиотеку impress.js и активировать отслеживание нажатий по стрелкам.
jQuery код
Для инициализации библиотеки impress.js нужно вызвать одноимённый метод. Он вернёт нам новый объект с методами для показа предыдущего/следующего слайдов.
script.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$(function(){ var imp = impress(); $('#arrowLeft').click(function(e){ imp.prev(); e.preventDefault(); }); $('#arrowRight').click(function(e){ imp.next(); e.preventDefault(); }); }); |
Вот теперь наша презентация готова!
Готово!
Вы можете использовать этот пример для создания подобных презентаций в интернет магазине на страницах с продукцией. Также эту презентацию можно переделать в галерею для изображений.
В Opera не работает, просто набор картинок
Под Маком в Сафари работает некорректно — режет картинки вместе с текстом, навигация страдает и эффекты иногда проскакивают.