Полезное в сети

Всегда в теме

Статистика


Яндекс.Метрика


Онлайн всего: 1
Гостей: 1
Пользователей: 0

Рекомендуем



Главная » 2013 » Март » 19 » Впечатляющее представление продукта на CSS3


22:50
Впечатляющее представление продукта на CSS3

Впечатляющее представление продукта на CSS3

Страница описания продукта является местом, где сконцентрирована информация о вашем товаре. Именно здесь закладывается интерес посетителя к представляемому предмету или услуге. Как правило, на такой странице содержится общее описание продукта, особенности и несколько изображений. Подать оригинально такую информацию достаточно сложно. Но есть библиотека JavaScript,  которая поможет решить задачу. 

Библиотека impress.js - маленький, независимый скрипт, предназначенный для построения презентаций на CSS3 с использованием различных эффектов. Но impress.js можно использовать не только для создания презентаций.  В данном уроке мы преобразим скучную страницу описания продукта с помощью магии CSS3!

 

demosourse

 

Разметка 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">&lt;</a>

                               <a id="arrowRight" class="arrow">&gt;</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-xdata-ydata-z перемещают слайд на экране в пространстве 3D;

•             data-rotatedata-rotate-xdata-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.jpgwidth="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
Источник урокаtutorialzine.com/2012/02/css3-product-showcase/
ПеревелСергей Фастунов

Категория: CSS//HTML//JS | Просмотров: 633 | Добавил: Wrecker | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Поиск

Вход

Гость
  • Вход
  • Регистрация
  • Читаемое

    Категории

    Заходи не жди