Домой / Для сайта / Перетаскиваемое слайд-шоу в двух вариантах
Перетаскиваемое слайд-шоу в двух вариантах

Перетаскиваемое слайд-шоу в двух вариантах

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

Демо Исходники

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

Основная идея заключается в переводе ползунка по оси Z, что позволяет ему быть либо в полноэкранном, либо в меньшего размера карусели. При переключении фактического размера слайд-шоу и удаления преобразования, когда они больше не нужны, мы позволяем слайд-шоу иметь «реальный» размер (то есть 25% от окна). За части содержания, мы скользим вверх и выявляем области прокрутки.

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

Перетаскиваемое слайд-шоу в двух вариантах

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

Перетаскиваемое слайд-шоу в двух вариантах

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

Перетаскиваемое слайд-шоу в двух вариантах

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

Перетаскиваемое слайд-шоу в двух вариантах

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

Демо Исходники

Источник урока: http://tympanus.net/codrops/2014/06/26/draggable-dual-view-slideshow

Перевел для сайта wordpress-club.com: Александр Овчаренко


Экспериментальное слайд-шоу, страницы которого можно перетаскивать мышкой и у которого есть два варианта просмотра: полноэкранный и режим маленькой карусели. В полноэкранном режиме связанное содержание может быть просмотрено. Сегодня мы хотели бы поделиться с вами экспериментальным слайд-шоу. Идея основана на великой концепции навигации с сайта Wild, где можно посмотреть проекты в полноэкранном режиме или в режиме карусели. Существуют различные методы, которые подошли бы для такого макета; мы попытались воссоздать этот слайд-шоу концепт с помощью библиотеки Dragdealer.js и 3D-преобразования. Основная идея заключается в переводе ползунка по оси Z, что позволяет ему…

Обзор

Проголосуйте за статью

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.9 ( 1 голосов )
100

Оставить комментарий

Ваш email не будет опубликован.

*