Двигает ленту элементов Zero-блока по горизонтали: на компьютере — вслед за мышью, на телефоне — от наклона устройства вбок. Настраивается один раз на весь блок, а не на каждом элементе, и сам считает, насколько ленту нужно уметь сдвинуть.
Ряд элементов в Zero-блоке, который выходит за края артборда, начинает ездить по горизонтали. На компьютере лента следует за мышью, на телефоне и планшете — за наклоном устройства вбок. Получается витрина, которую листают движением, без полос прокрутки и кнопок.
Похожий эффект Тильда умеет и сама. Соберите элементы в одну строку, откройте настройки первого, промотайте до Basic Animation и выберите Parallax → Mouse, задав Dist X. Отрицательное число двигает элемент в сторону движения мыши, положительное — навстречу. Потом анимацию нужно скопировать на остальные элементы.
Для трёх-четырёх картинок этого достаточно. Дальше начинаются неудобства:
Скрипт слушает событие ориентации устройства. В портретном положении боковой наклон описывает угол gamma, в альбомном эту роль берёт на себя beta — скрипт смотрит на текущий поворот экрана и выбирает нужный.
Нулём считается то положение, в котором посетитель держит устройство в первый момент. Без этого лента уезжала бы в край у всех, кто держит телефон не строго вертикально. После поворота экрана ноль сбрасывается и берётся заново, а лента возвращается в середину.
Чувствительность задаётся в градусах: сколько нужно наклонить устройство от нулевого положения, чтобы лента доехала до края. 25° — спокойное движение кистью, 10° — заметно резче.
С iOS 13 показания датчиков не приходят, пока посетитель явно не разрешит их в системном окне. Запросить разрешение можно только в ответ на настоящее касание экрана — просто так браузер окно не покажет.
Поэтому решение оставлено за вами, галочкой «Спрашивать разрешение на iPhone»:
На Android разрешение не требуется, там наклон работает сразу.
Не включайте одновременно родной Parallax → Mouse на тех же элементах: Тильда двигает вложенную обёртку, скрипт — сам элемент, и сдвиги сложатся.
Артборд должен обрезать содержимое по краям — иначе выехавшие элементы будут видны и эффекта «ленты» не получится.
Если в системе включена настройка «уменьшить движение», эффект не включается вовсе — ни от мыши, ни от наклона. Такая анимация у части людей вызывает физический дискомфорт, исходная настройка ровно об этом.
На устройствах без гироскопа наклон работать не будет — лента просто останется неподвижной.
Войдите в аккаунт, чтобы увидеть код и настройки этой модификации
Некодим