Полезное в сети
Всегда в теме
Статистика
Свежий софт
| Wrecker |  |
| Kaspersky Internet Security 2015 | |
| Wrecker |  |
| Virtual DJ | |
| Wrecker |  |
| SoundForge 11 | |
| Wrecker |  |
| Alcohol 120 | |
| Wrecker |  |
| Norton Internet Security 2014 | |
| Iron |  |
| Loaris Trojan Remover | |
Рекомендуем
Главная » 2013 Март 19 » Впечатляющее представление продукта на CSS3
22:50 Впечатляющее представление продукта на CSS3 |
Впечатляющее представление продукта на 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();
}); }); Готово Данный урок подготовлен для вас командой сайта ruseller.com |
|
|
| Всего комментариев: 0 | |
