главная

Теги:


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

3D эффект будет выводиться только в браузере Safari!

Данная галерея имеет следующий набор функций:

  • При наведении курсора мыши на изображение выводится его описание.
  • Проскальзывание всех изображений с помощью слайдера jQuery UI Slider, который располагается наверху страницы.
  • Прокрутка всех изображений с помощью колесика мыши.
  • Предварительный просмотр миниатюр при выборе изображения на нижней панели управления
  • Используется прямая ссылка в адресе URL для прямого доступа к изображению
  • При нажатии кнопки мыши на изображении, оно смещается влево до центра экрана
  • Используется 3D перспектива при прокручивании, проскальзывании (только для браузера Safari)
  • Переворот перспективы при изменении направления прокрутки/проскальзывания (только для браузера Safari)

В приложении используются плагины jQuery:  Hashchange Plugin  (автор Ben Alman) для изменения хэша адреса URL и Mousewheel Plugin (автор Brandon Aaron) для организации прокрутки изображений с помощью колесика мыши.  Фотографии сделал Alan Antiporda (оригиналы на Flickr).

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

Навигация осуществляется либо с помощью слайдера (наверху страницы), либо с помощью прокрутки колесиком мыши.

Можно также использовать миниатюры для выбора изображения.

 

При наведении на изображение курсора мыши, выводится описание.

Подробности реализации можно посмотреть в исходниках. Структура HTML/CSS кода достаточно проста, а код JavaScript имеет комментарии на русском языке.

Источник урока: tympanus.net/codrops/2011/02/02/3d-wall-gallery/

Урок Создан:2011-05-17 Просмотров:1605

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


Copyright© 2009 Hosted by Zhost