Если вы хотите удивить пользователя презентацией материала, и сделать это весьма своеобразно, тогда этот урок станет вам интересный. В данном посте мы рассмотрим как создать замечательную презентацию с помощью средств CSS3. С помощью таких оригинальных презентаций закладывается интерес посетителя к представляемому предмету или услуге. Как правило, на такой странице описания продукта, содержится общее описание материала, особенности и несколько изображений. Подать оригинально такую информацию, а главное правильно, достаточно сложно.

Для работы нам понадобиться маленький скрипт impress.js- данная библиотека, предназначенный для построения презентаций на CSS3 с использованием различных эффектов. Но impress.js можно использовать не только для создания презентаций. Для начала мы рассмотрим структуру HTML. Здесь мы будем включать в раздел заголовка подгрузку шрифтов Google Webfonts и стили, а перед закрывающим тегом тела страницы — несколько JavaScript файлов.

Разъясним некоторые элементы. Элемент div #impress будет содержать наши слайды. ID необходимо использовать для  скрипта impress.js. За элементом со слайдами следуют стрелки для переключения кадров.

Скрипт  impress.js не нуждается в jQuery, который включен в проект для формирования функционала стрелок, в нашем файле script.js. Далее мы рассмотрим подпункт для размещения материалов с параметрами нашего скрипта:

Давайте разберемся в атрибутах данного скрипта:

  • data-xdata-ydata-z перемещают слайд на экране в пространстве 3D;
  • data-rotate, data-rotate-x, data-rotate-y вращают элемент вокруг заданной оси (значения указываются в градусах);
  • data-scale – увеличение или уменьшение слайда.

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

Теперь рассмотрим некоторые правила CSS, которые используются для данной презентации:

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

Затем надо указать стили для каждого слайда. Здесь приводится код только для первого слайда, свойства для остальных кадров вы найдете в исходных кодах.

Последним делом, мы рассмотрим маленький прием jQuery для инициализации скрипта нужно вызвать метод с таким же именем. Метод инициализации возвращает объект с методами для вывода следующего и предыдущего слайдов.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.