Впечатляющее представление продукта на CSS3
Страница описания продукта является местом, где
сконцентрирована информация о вашем товаре. Именно здесь закладывается интерес
посетителя к представляемому предмету или услуге. Как правило, на такой
странице содержится общее описание продукта, особенности и несколько
изображений. Подать оригинально такую информацию достаточно сложно. Но есть
библиотека JavaScript, которая поможет решить задачу.
СМОТРЕТЬ
ДЕМО СКАЧАТЬ
ИСХОДНИК
Библиотека impress.js -
маленький, независимый скрипт, предназначенный для построения презентаций на
CSS3 с использованием различных эффектов. Но impress.js можно использовать не
только для создания презентаций. В данном уроке мы преобразим скучную
страницу описания продукта с помощью магии CSS3!
Разметка HTML
Начнем с разметки нашей страницы:
<!DOCTYPE
html>
<html>
<head>
<meta charset="utf-8" />
<title>Впечатляющее
представление продукта на CSS3
| Материалы сайта RUSELLER.COM</title>
<!--
Шрифты Google Webfonts и
стили для демонстарции -->
<link rel="stylesheet"
href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300&subset=latin,cyrillic"
/>
<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">
<!--
Материалы будут располагаться здесь
-->
</div>
<a id="arrowLeft"
class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
<!-- JavaScript -->
<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>
Обычная страница. Включаем в раздел заголовка подгрузку шрифтов Google Webfonts и
стили, а перед закрывающим тегом тела страницы - несколько JavaScript файлов.
Элемент div #impress будет содержать
наши слайды. ID необходимо
использовать для скрипта impress.js.
За элементом со слайдами следуют стрелки для переключения кадров.
Скрипт impress.js не
нуждается в jQuery,
который включен в проект для формирования функционала стрелок.в нашем файлеscript.js.
Используем impress.js
С помощью маленького скрипта мы можем создавать
плавные CSS3
переходы между слайдами в нашем шоу. Нужно указать ориентацию кадров с помощью
атрибута данных в элементах div. Значения атрибутов будут распознаваться скриптом и
реализовываться с помощью трансформаций CSS3 в зависимости от возможностей браузера.
Impress.js поддерживает
следующие атрибуты:
• data-x, data-y, data-z перемещают слайд на
экране в пространстве 3D;
• data-rotate, data-rotate-x, data-rotate-y вращают элемент вокруг заданной
оси (значения указываются в градусах);
• data-scale – увеличение или уменьшение
слайда.
Вот пример разметки с использованием атрибутов данных:
<!-- Первый слайд выводится по умолчанию, поэтому у него
будет начальное положение-->
<div id="intro"
class="step" data-x="0" data-y="0">
<h2>Представляем Galaxy Nexus</h2>
<p>Android 4.0<br /> Экран Super Amoled 720p<br />
Двухядерный процессор 1.2 GHzU<br /> Емкость памяти
32 GB<br /> Быстрая
камера</p>
<img src="assets/img/nexus_1.jpg"
width="232" height="458" alt="Galaxy Nexus" />
</div>
<!-- Второй слайд смещается, поворачивается и увеличивается-->
<div
id="simplicity" class="step" data-x="1100"
data-y="1200" data-scale="1.8"
data-rotate="190">
<h2>Простота в Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich открывает совершенно новый вид
и ощущения от Android.
Прелестные шаблоны с изысканой анимацией и восхитительными цветами
создают ощущение жизни. </p>
<img
src="assets/img/nexus_2.jpg" width="289"
height="535" alt="Galaxy Nexus" />
</div>
<!-- Для остальных слайдов производятся подобные манипуляции -->
<div
id="connect" class="step" data-x="-300"
data-y="600" data-scale="0.2"
data-rotate="270">
<h2>Всегда на связи</h2>
<p>Расскажи о своих важных моментах в
жизни всем. Galaxy Nexus поможет
поделиться новостью легко и быстро. </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>Мгновенная загрузка</h2>
<p>Ваши фотографии будут автоматически
загружены с помощью Instant Upload,
чтобы их увидели друзья и близкие.</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>Шагай по жизни вместе с Google Music</h2>
<p>Google Music сделает поиск, покупку и прослушивание
музыки простым и приятным делом. Сохраяняй свой коллекции, отправляй их на
свой Galaxy Nexus,
ноутбук или устройство с Android.</p>
<img src="assets/img/nexus_5.jpg"
width="570" height="389" alt="Galaxy Nexus" />
</div>
Когда слайдшоу начинается, impress.js выполнит в скрытом режиме
указанные трансформации и затем будет применять обратные правила при выводе
слайдов. В результате получится слайдшоу с отличными визуальными эффектами.
CSS
Для работы нашей презентации нужно также использовать
некоторые правила 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 '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;
}
Контейнеру #impress назначается
класс .impress-not-supported. Данный класс удаляется только
если браузер поддерживает требуемый библиотекой функционал.
Затем надо указать стили для каждого слайда. Здесь
приводится код только для первого слайда, свойства для остальных кадров вы
найдете в исходных кодах.
/*----------------------------
Слайд 1 - Введение
-----------------------------*/
#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;
}
jQuery
Для инициализации скрипта нужно вызвать метод с таким же
именем. Метод инициализации возвращает объект с методами для вывода следующего
и предыдущего слайдов.
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
Готово
Ссылка на источник
| 
