Креативный полноэкранный слайдер товаров на CSS3! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSКреативный полноэкранный слайдер товаров на CSS3!
Дата: 02.08.2013 в 00:30 | Просмотров: 8270

Креативный полноэкранный слайдер товаров на CSS3!

полноэкранный слайдер товаров
Скачатьбесплатно с сервера
Демодемонстрация

Занимаясь продажами в интернете, Вам обязательно нужно иметь для этого страницу с продуктом в интернете. Она должна иметь описание товара, его фотографии и друга информация. Естественно, это место, где Вам необходимо привлечь внимание клиента, и удержать его внимание.

В этом Вам поможет слайдер товаров, который имеет заголовок, изображение и небольшое описание. Обязательно посмотрите также другой, популярный резиновый JQuery слайдер товаров.

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

Это то, чем мы сегодня займемся – создадим слайдер с эффектами на CSS3!

HTML основа

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

Как видите, ничего необычного или космического здесь нет. У нас есть наши основные стили (мы вернемся к ним в следующем разделе) и несколько необходимых скриптов JavaScript, помещенных перед закрывающим тегом body.

Главный id c bvtytv #impress включает в себя все слайды. Такой id требуется для того, чтобы слайдер работал со скриптом impress.js (это можно изменить, передав другой идентификатор для вызова функции в файле script.js). После этого, у нас есть две стрелки, которые инициируют переходы между слайдами.

И в конце страницы у нас есть подключенные файлы JavaScript. impress.js является автономным и не требует подключения библиотеки JQuery, но мы её используем для script.js, чтобы работали кнопки переключения между слайдами.

Структура слайдов

слайдер с эффектами на css3

Каждый из наших слайдов содержит три элемента:

  • h2 заголовок;
  • p абзац текста;
  • img изображения смартфона (или любого другого товара).

Все они расположены уникально для каждого слайда. Промо-изображения и текст для этого примера были взяты из сайта Galaxy Google Nexus.

Элементы слайдов сгруппированы в отдельный div с классом step, внутри контейнера #impress. Тем самым мы заложили отличную основу для создания эффектов с impress.js!

Использование impress.js

С помощью этой небольшой библиотеки, мы можем создать гладкие CSS3 переходы между слайдами. Чтобы сделать это, мы должны задать для impress.js параметры того, как позиционировать слайды. Это легко сделать – мы будем использовать data атрибуты для всех step. Эти атрибуты через скрипт будут преобразовывать данные в реальное CSS3 преобразования, в зависимости от текущего браузера, и влиять на каждый из слайдов.

Impress.js поддерживает ряд атрибутов:

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

Ниже Вы можете увидеть пример разметки слайда:

Когда слайд-шоу начинается, impress.js будет балансировать эти преобразования, и применить обратные правила для #impress с плавным переходом CSS.

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

CSS стилизация слайдера товаров

Чтобы работы слайдера продуктов, нам придется применить некоторые правила css. Первый шаг заключается в стилизации основного контейнера и добавить стили по умолчанию для всех элементов слайда.

Теперь нам нужно стилизовать отдельные слайды. Я буду рассматривать только классы для первого слайда, остальные Вы можете найти в исходниках, в файле стилей styles.css.

Все, что осталось это небольшой сниппет JS для активации impress.js, а также некоторые правила для работы стрелок переключения слайдов.

Немного JQuery

Для инициализации библиотеки Impress мы должны вызвать эту функцию с тем же именем id. Это также возвращают новый объект, с методами для показа предыдущего / следующего слайдов (стрелки вправо и влево).

На этом, создание слайдера товаров с эффектами закончено!

Заключение

Вы можете использовать этот слайдер для целевых, продающих страниц или превратить это в галерею изображений – всё в Ваших руках. Экспериментируйте, пробуйте и всё получится!

Если Вы использовали советы из этого урока, и создали свой слайдер или хотите поделиться своим опытом – жду комментариев! Спасибо за внимание! :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tutorialzine.com/2012/02/css3-product-showcase/
Перевел: Владислав Бондаренко


ВСЕ КОММЕНТАРИИ

    1. CrazyUser:
      @

      Сайт супер!)

      1. Влад Бондаренко (Admin):
        http://vladmaxi.net

        Спасибо, мы стараемся)
        Ваша поддержка в любом виде, даже активном комментировании статей – очень ценна! :)

Добавить комментарий