11 января 2017 г.

Интерактивные интерьеры

Интерактивные интерьеры - это слайд-шоу на основе концепции прототипа Dribbble shot "Spaces".

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

Внимание: Некоторые из свойств CSS, как 3D, и связанные с ним, работают только в современных браузерах. Они не будет работать в IE, где свойство transform-style: preserve-3d не поддерживается.

Реализация таких компонентов, основанных на 3D довольно сложна, если стоит цель - пройти весь путь и сделать все в "реальном 3D". Когда мы осмотрели всю идею, вскоре стало ясно, что мы можем на самом деле сделать "поддельную" перспективу части комнаты путем вырезания изображений и разделив их там, где у нас есть чистый срез стены. Так, чтобы была возмжность вращать части и сделать их более подобными 3D.

В основном, мы делали слайд-шоу, где каждый слайд состоит из двух или более секций, которые имеют соответствующие изображение на стене. Затем мы добавили некоторые элементы, которые являются интерактивными и на отображают дополнительную информацию. Слайды становятся аниммированными при добавлении анимационного класса. Это добавлят слайдам некоторого перемещения, а также их внутренним частям, чтобы осущевствить некоторое вращение в 3D, создавая немного глубины. Так же весь вид вращается немного, когда мы перемещаем мышь.

Для мобильных устройств, мы просто сократили весь вид до списка всех элементов с помощью некоторых медиа запросов.

Tags : , ,

Комментариев нет:

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

Follow us

Follow.NOETIKOS

Contact Info

Как связаться с нами

Узнайте стоимость поддержки вашего проекта

Или заполните бриф на заказ услуг

Заполнить бриф
×