Создание впечатляющей презентации для продукции с помощью CSS3

Страница, демонстрирующая товар потенциальному покупателю, должна содержать подробное описание его характеристик и фото. Она должна быть достаточно оригинальной, чтобы привлечь внимание посетителей.

В этом нам поможет новая компактная JavaScript библиотека.

Пример Скачать
impress.js — небольшая независимая библиотека, позволяющая без серьёзных усилий создавать сложные презентации с eye-catching effects с помощью CSS3.

А что если использовать impress.js не для обычных презентаций, а для чего-то другого? Это именно то, чем мы займёмся сегодня. Мы создадим необычную страницу для демонстрации продукции посетителям, используя немного магии CCS3! Здесь ваша видеореклама в интернете

HTML код

Начнём с создания простого HTML5 документа, который станет основой для сегодняшнего примера.

index.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 код для слайдов:

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

CSS код

Чтобы презентация корректно работала, мы установим нужные CSS правила. Сначала опишем основные стили для контейнера и его элементов.

assets/css/style.css

Как Вы, наверное, заметили в стилях выше и в блоке с HTML разметкой в начале урока, контейнеру #impress назначен класс .impress-not-supported. Это класс удаляется только в том случае, если текущий браузер поддерживает необходимый функционал для корректной работы библиотеки.

А теперь зададим стили каждому конкретному слайду. В качестве примера приведем фрагмент кода только для первого слайда, а остальные стили Вы найдёте в assets/css/styles.css.

Осталось только инициализировать библиотеку impress.js и активировать отслеживание нажатий по стрелкам.

jQuery код

Для инициализации библиотеки impress.js нужно вызвать одноимённый метод. Он вернёт нам новый объект с методами для показа предыдущего/следующего слайдов.

script.js

Вот теперь наша презентация готова!

Готово!

Вы можете использовать этот пример для создания подобных презентаций в интернет магазине на страницах с продукцией. Также эту презентацию можно переделать в галерею для изображений.

Пример Скачать


2 комментарий на “Создание впечатляющей презентации для продукции с помощью CSS3

  1. Под Маком в Сафари работает некорректно — режет картинки вместе с текстом, навигация страдает и эффекты иногда проскакивают.

    Thumb up 0 Thumb down 0

Оставить комментарий