mKotelnikov.ru
Оставьте заявку или свяжитесь со мной удобным способом
Оставить заявку
 
Оставить заявку
DELO.js > Scroll
Скролл-зависимое трёхмерное вращение
Скрипт для вращения объекта в трёхмерном пространстве в ходе просмотра страницы пользователем.
Перейти к документации
Перейти к песочнице
Для поддержки скрипта требуются браузеры поддерживающие ECMAScript 5+ и CSS 3D Transforms. Поддержка данных технологий внедрена в период с 2009 по 2011 год. Ориентировочная оценка поддержки: ~97%.
$SCROLL
Rotate
Подключение
Для использования скрипта необходимо подключить заготовленную библиотеку со скриптами. Рекомендуется использовать минимизированную версию «delo.min.js» для быстрой загрузки и уменьшения размера страницы.
<script src="https://333616.selcdn.ru/links/DELOJS/delo.js"></script>
или
<script src="https://333616.selcdn.ru/links/DELOJS/delo.min.js"></script>
Строчку из примера выше необходимо вставлять в <head> код страницы.
Для вставки кода на Tilda необходимо перейти в Настройки страницы > Дополнительно, найти раздел HTML-код для вставки внутрь head и нажать на Редактировать код. Откроется страница с редактором кода, в который необходимо вставить одну из строчек из примера выше.
Пример вставки кода в <head>
Строчку с кодом также можно вставить в обычный HTML блок (T123), тогда страница будет загружаться быстрее, но анимация может сработать с задержкой. В этом случае рекомендуется располагать HTML блок в начале страницы.
Минимальная версия
Чтобы начать использовать скрипт достаточно указать элемент, который необходимо вращать, другие настройки будут установлены по умолчанию.
<script>

DELO$SCROLL_Rotate({
    "selector": "*[href='#rotate_01'] > img",
});

</script>
Где и как это использовать?  —  Подробнее об опции: selector
Как использовать скрипт
После подключения библиотеки DELO. JS необходимо вызвать функцию с указанием параметров анимированного элемента. Код с параметрами (пример выше) можно вставлять как в обычный HTML блок (Т123), так и в HTML элемент в Zero Block.

Вызывать код можно многократно для разных элементов с разными настройками, все они будут обрабатываться одновременно.

Чтобы вызвать код нужно в теге <script> прописать название функции, в нашем случае это DELO$SCROLL_Rotate. Внутри функции в скобках рядом необходимо открыть фигурные скобки и перечислять параметры в виде "параметр": "значение".
Опция: Selector
Название параметра: selector
Допустимые значения: любой селектор допустимый в HTML

Использовать анимацию скролла можно на любой элемент страницы, включая текст, картинки, видео, блоки и т. д.
Чтобы указать на какой-либо элемент необходимо использовать уникальный идентификатор, ниже представлен пример использования на любом элементе в Zero Block:
{
    "selector": "*[href='#rotate_01'] > img"
}
Чтобы использовать данное значение необходимо указать у элемента в ссылке Link > URL уникальный идентификатор не повторяющийся в других элементах и отключить возможность клика на элемент Pointer events > None.

Тот URL, который вы укажете необходимо заменить в примере вместо #rotate01.
Примечание: Тильда после установки настроек может выдать ошибку, она будет возникать всегда, поэтому важно указывать сначала URL, затем Pointer events. При указании в обратном порядке Тильда просто удалит значение URL и код не сработает: с
Стандартная версия
Стандартный набор настроек позволяет указать коэффициенты вращения и настройки перспективы для точной настройки угла, по которому будет вращаться объект и симуляции настроек камеры.
<script>

DELO$SCROLL_Rotate({
    "selector": "*[href='#rotate_01'] > img",
    "axisX": 1,
    "axisY": 0,
    "axisZ": 0,
    "perspective": 600,
});

</script>
Подробнее об опциях: axis — Подробнее об опции: perspective
Опции: Axis
Название параметров: axisX, axisY, axisZ
Допустимые значения: от -1 до 1

Данные параметры настраивают коэффициенты осей, по которым будет вращаться объект. Так каждый коэффициент отвечает за то, насколько будет поворачиваться объект по оси при скролле.

Например, если мы укажем такие значения:
{
    "axisX": 1,
    "axisY": 0,
    "axisZ": 0,
}
Тогда объект будет вращаться только по оси X (тангаж), по оставшимся осям объект вращаться не будет и мы в итоге получим вращающуюся на нас карточку. Такой же принцип работает и с другими осями.
только X
только Y
только Z
Кроме того мы можем указать отрицательное значение параметра, изменив направление вращения на обратное.
положительное
отрицательное
Опция: Perspective
Название параметра: perspective
Допустимые значения: 0 или более

Так как объекты вращаются в трёхмерном пространстве, то мы можем симулировать перспективу. Например нулевая перспектива создаст ортографический вид, в котором трудно на глаз определить угол, но удобно использовать для изометрии. Любая перспектива больше нуля будет подходить для симуляции искажения линзы.

Примеры разных перспектив можно посмотреть ниже.
нулевая
стандартная (500)
Расширенная версия
При необходимости точной настройки можно указать центр, относительно которого будет вращаться элемент, точность вращения, множитель скорости, скорость анимации и другое.
<script>

DELO$SCROLL_Rotate({
    "selector": "*[href='#rotate_01'] > img",
    "axisX": 1,
    "axisY": 0,
    "axisZ": 0,
    "bias": 0,
    "multiplier": 0.1,
    "perspective": 600,
    "centerX": 0.5,
    "centerY": 0.5,
    "animationFunction": "ease-out",
    "animationTime": "250",
    "throttleMax": 3,
    "accuracy": 0.1,
});

</script>
Подробнее об опции: bias — Подробнее об опции: multiplier — Подробнее об опциях: center — Подробнее об опции: animationFunction — Подробнее об опции: animationTime — Подробнее об опции: throttleMax — Подробнее об опции: accuracy
Опция: Bias
Название параметра: bias
Допустимые значения: любое число

Вращение на странице происходит не всегда, пока пользователь не видит элементы они игнорируются. Поэтому рассчитываются края исходного положения элемента, и если они входят в экран — обрабатывается вращение. Однако, если края элемента при вращении выходят за первоначальные границы, то скрипт этого не обрабатывает. Чтобы избежать застывшей анимации рекомендуется использовать bias.

Указав положительное значение, например 100, скрипт будет срабатывать за 100 пикселей до входа в экран, или же если указать отрицательное, например -200, то скрипт сначала пропустит 200 пикселей элемента на экране и уже потом запустит анимацию.

Данная настройка изначально настроена строго на срабатывание при попадании на экран, поэтому при возникновении проблем её можно выставить больше нуля.
Опция: Multiplier
Название параметра: multiplier
Допустимые значения: любое значение кроме 0

Опция предназначена для настройки скорости вращения. Так, например, при значении 1 скрипт будет вращать объект на 1 градус при каждом проскроленном пикселе. Или же при значении 0.1 (стандартное значение) элемент будет поворачиваться на 1 градус каждые 10 пикселей и так далее.

При отрицательных значениях, например -0.25, элемент будет вращаться на 1 градус каждые 4 пикселя, но в обратном направлении.
Опции: Center
Название параметров: centerX, centerY
Допустимые значения: от 0 до 1

Опции настройки центра указывают относительно какой точки будет вращаться элемент. Измеряются опции в долях, например, значение 0.5 подразумевает под собой 50% от левого края объекта, то есть центр по горизонтали.

Ниже можно ознакомиться с примерами различных опций:
x:0, y:0
x:1, y:0
Опция: Animation Function
Название параметра: animationFunction
Допустимые значения: любая временная функция поддерживаемая CSS

Настройки временной функции анимации позволяют сконфигурировать как именно элемент будет анимирован от предыдущего значения скролла до следующего. Таким образом при определённых настройках можно достичь плавности движения.

Подходящими значениями могут выступить, например, ease-out, ease-in, linear и другие поддерживаемые функции. Подробнее с ними можно ознакомиться в документации от MDN
Опция: Animation Time
Название параметра: animationTime
Допустимые значения: 0 или более

Данная опция настраивает время анимации перехода между разными углами элемента. Таким образом можно настроить, чтобы объект поворачивался мгновенно, но резко или медленно, но плавно.

Значения опции вводятся в миллисекундах. Например 1000 означает, что в анимация будет проигрываться около секунды.

Примеры разных использованных временных значений представлены ниже
значение 50
значение 500
Опция: Throttle Max (техническая)
Название параметра: throttleMax
Допустимые значения: 0 и более

Опция максимального значения дросселирования призвана указать сколько нужно пропустить обновлений скролла для начала обновления. Например, при значении 5 скрипт будет срабатывать в 5 раз реже и тем самым уменьшит нагрузку. В таких случаях плавности можно добиться за счёт animationFunction и animationTime.

Стандартное значение обрабатывает каждое третье обновление, но при низкой производительности его можно увеличить.
Опция: Accuracy (техническая)
Название параметра: accuracy
Допустимые значения: больше 0 и меньше либо равно 1

Опция точности влияет на то, насколько точно обработается скролл пользователя. Например при значении 0.01 скрипт будет обрабатывать поворот в точности до 0.01 градуса. При значении 1 будет обрабатываться только по одному градусу за раз. Чем меньше значение, тем точнее и аккуратнее поворот.

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

Ось X: {{ this.axis_x }}

Ось Y: {{ this.axis_y }}

Ось Z: {{ this.axis_z }}

Центр X: {{ Math.floor(this.center_x*100) }}%

Центр Y: {{ Math.floor(this.center_y*100) }}%

Множитель скорости: {{ this.multiplier }}

Перспектива: {{ this.perspective }}px

Время анимации: {{ timing }}ms

Вид анимации

Ширина: {{ this.sb_width }}px

Высота: {{ this.sb_height }}px

Сбросить положение

Прозрачность панели

Экспорт

Используя представленный выше редактор вы можете экспортировать настройки в виде кода в буфер обмена и вставить его в любой HTML блок на сайте.

Не забудьте указать URL в опции selector.
Made on
Tilda