В приложении iTunes можно заметить интересный эффект под названием CoverFlow. В данном уроке мы рассмотрим как сделать такую удобную навигацию с помощью jquery и css. Данная навигация станет отличным инструментом для навигации по большим коллекциям изображений или фонотеке музыки. Одним из преимуществ является трансформации css, которые придают эффект трехмерности изображений. Данный эффект обычно создают с помощью flash, но это не совсем практично и удобно в использовании, все это можно сделать достаточно проще..

..с помощью библиотек виджетов jquery ui. Фабрика виджетов является очень полезным инструментом, так как она предлагает последовательные, хорошо определенные структуры для создания и взаимодействия с плагинами с фиксацией состояния. Совсем не обязательно использовать фабрику виджетов, но она упрощает процесс установки стандартной конфигурации. При использовании фабрики виджетов надо помнить, что конечный результат не является виджетом jQuery UI  – это все еще плагин jQuery, но с API похожей на jQuery UI.

Кодируем эффект CoverFlow с помощью фабрики виджетов jQuery UI  $.widget.

Примечание: следующие методы по умолчанию доступны в каждой реализации плагина $.widget plugin:

  • destroy(): удаляет экземпляр из DOM
  • option(название_опции[, значение]): получает или устанавливает значения опций для данного экземпляра
  • enable(): разрешает использование функционала виджета, если она ранее было запрещена методом disable
  • disable(): запрещает использование функционала виджета

И следующее свойство доступно по умолчанию:

  • options: опции экземпляра виджета, смешение значений по умолчанию с установками обеспечивается пользователем

Используя выше описанную структуру можно инициализировать только что созданный плагин:

Также можно вызвать публичные методы:

Создание плагина jQuery со статическим состоянием не занимает много времени, а $.widget обеспечивает удобный способ для написания виджетов.

Для генерирования эффекта CoverFlow используется несколько функций, но ключевыми являются select() и _refresh(). Функция select() выполняет анимацию перемещения при выборе обложки, а функция  _refresh() генерирует информацию для трансформации обложки при различных действиях, таких как инициализация CoverFlow или нажатие на обложке для переноса ее на основной вид.

ui.coverflow.js.

Код, приведенный выше сначала определяет, справа или слева находится обложка (различные значения параметров используются в зависимости от стороны).  Затем устанавливается z-Index для обложки в зависимости от глубины ее расположения в стеке изображений, а потом вычисляются значения матрицы трансформаций и масштабирования для картинок в форме трапеций.

Рассмотрим использование CoverFlow. Для использования CoverFlow нужно определить список пунктов, для которого будет использоваться эффект. Задействуем простую структуру HTML кода. Также определяем разметку для слайдера и списка названий, которые выводится ниже CoverFow.

Для контейнера CoverFlow, списка  изображений (#coverflow) и самого изображения используются следующие стили CSS:

Демонстрация использует также дополнительные действия с помощью JavaScript. Они включены в отдельный файл app.js:

Теперь осуществляем навигацию с помощью клавиатуры:

И последним шагом будет навигация с помощью колесика мыши:

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