Draggable Dual- креативный подход к построении галереиНа любом сайте можно встретить множество изображений, последней тенденцией стало полноэкранные слайды, которые можно с легкостью переключать, при этом слайды во весь экран не требуют множества ресурсов. В данном уроке мы рассмотрим весьма интересную, на мой взгляд, галерею которая использует множество элементов управления, кроме этого организован весьма креативный подход к переключению слайдов. Идея основана на большой навигации, где можно посмотреть проекты в полноэкранном или в режиме карусели.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Draggable Dual- креативный подход к галереи

 Существуют множество методов, которые позволили бы организовать подобную галерею, мы же попытались воссоздать это слайд-шоу концепт с помощью Dragdealer.js библиотекой 3D-преобразования. Основная идея заключается в переводе ползунка по оси Z, что позволяет ему быть либо полноэкранном режиме или в  уменьшенном размере карусели. При переключении фактический размер слайд-шоу будет изменяться, а также мы добавим небольшую плавность чтобы скрасить движение слайдов.

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

Изображения, используемые в демо взяты из Unsplash.com.

Когда слайд-шоу загружается, мы покажем некоторую информацию, чтобы уведомить Вас, какие взаимодействия существуют с данной галереей:

 Draggable Dual- креативный подход к построении галереи

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

 Draggable Dual- креативный подход к построении галереи

При нажатии на кнопку со стрелкой, полное содержание галереи будет отображаться с плавным переходом:

 Draggable Dual- креативный подход к построении галереи

При нажатии на кнопку на переключателе вида, слайд-шоу будет отображение дополнительной информации слайда:

 Draggable Dual- креативный подход к построении галереи

Обратите внимание, что на момент выпуска, Firefox (30,0, Mac и Windows) был худшим в отображении данного эффекта, в нем наблюдаются проблемы 3D-преобразования, анимации и переходов. Хотя мы пытались исправить все проблемы, некоторые эффекты могут работать некорректно.

Вот и все. Готово!

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