В одной из прошлых заметок мы рассказали про микровзаимодействия, связанные с курсором пользователя, их положительное влияние на работу с интерактивными элементами интерфейса и даже поделились нашей библиотекой react-interactions.
Разумеется, микровзаимодействия не ограничиваются только грамотной работой с тапами и кликами. Например, в мобильных версиях сайтов и сервисов мы также оживляем объекты страницы за счет их наклона при изменении ориентации устройства в пространстве. Таким образом, вращаемые элементы обретают физические свойства, а пользователь получает возможность рассмотреть их с разных ракурсов.
Так, в рамках концепции сайта для Райффайзенбанк, сделанной нами год назад, мы поступили с банковскими картами — за счет их вращения посетитель понимает, что это реальный объект, а не просто фотография или фон на сайте.
При этом добавить это микровзаимодействие на сайт не так сложно: для получения текущего положения устройства в пространстве создается обработчик события
deviceorientation, а полученные в нем градусы наклона используются для установки CSS-свойства transform.Для того чтобы вращение происходило относительно положения, в котором пользователь изначально держал устройство, можно сохранить первые полученные параметры наклона, а затем вращать элементы на разницу между ними и текущими данными.
Также родительскому блоку в CSS нужно установить
perspective, иначе вращения в пространстве не будет видно.Для добавления плавности движения можно использовать обычный
transition. Если опустить вопросы кроссбраузерности, то решение может занять не более 30 строк JavaScript-кода:
https://bitbucket.org/snippets/OlegChulakovStudio/oeoj9E
Код в действии (смотреть с мобильных устройств):
http://dev.chulakov.ru/deepdigital/rotate/