В классическом Parallax при прокрутке (скролле) страницы обычно используется небольшой сдвиг фоновой картинки вверх или вниз. Мы пошли дальше: эффект “Parallax” можно применять и к отдельным объектам (любым блокам Элементора).

Начиная с версии ThemeREX Addons 2.18.0 можно независимо настраивать для объекта параметры анимации при скролле и/или при перемещении мыши. Вкладка с анимациями переименована в “Animation” вместо “Parallax & Entrance”.

Поле “Animation Flow” задает вид анимации:

• Default – аналог старого вида Parallax. До пересечения “Start Point” объект не трансформируется и имеет состояние в соответствии с настройками из таба “Animate From”. После пересечения “Start Point” вплоть до прихода к “End Point” происходит плавная трансформация объекта к состоянию, заданному в табе “Animate To”. После полного пересечения “End Point” (низ объекта пересек эту линию) объект остается в состоянии, заданном на вкладке “Animate To”.
• Sticky – до пересечения “Start Point” объект не трансформируется и имеет состояние в соответствии с настройками из таба “Animate From”. После пересечения стартовой точки он “застывает” на месте (становится “sticky”) и начинает трансформироваться в состояние, заданное на вкладке “Animate To”. Как только заканчивается его родительская секция (низ колонки касается объекта), она “подталкивает” его и объект продолжает скроллиться дальше уже в конечном состоянии. Внимание! Для реализации этого эффекта нужно для секции задать параметр “Height” равный “Min. Height” и в следующем поле установить достаточную высоту строки. А также указать, что колонки в секции имеют высоту “Stretch”, т.е. растянуты по высоте секции (как на скрине): https://prnt.sc/bg4fmwEdKbmK
• In Out – изначально объект трансформирован в соответствии с настройками из таба “Animate From” и при входе в видимую область окна до прихода к “Start Point” начинает преобразовываться к своему исходному состоянию (т.е. становится таким, каким его установили на странице без всяких трансформаций). Далее до прихода к “End Point” остается в этом (исходном) состоянии (т.е. не трансформируется). После пересечения “End Point” и вплоть до выхода из видимой области окна объект трансформируется к состоянию, заданному в табе “Animate To”.
• Entrance – аналог старого вида Entrance. До пересечения “Start Point” объект трансформирован в соответствии с настройками из таба “Animate From”. При пересечении “Start Point” происходит ЕДИНОРАЗОВОЕ преобразование к настройкам из таба “Animate To” за время, заданное в параметре “Duration”. Параметр “Ease” позволяет указать временную функцию для трансформации.

Обратите внимание!

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

Вид “Entrance” выполняет трансформацию только при первом входе в окно. Далее объект все время остается в состоянии, заданном на вкладке “Animate To” и больше не реагирует на скролл.

Поле “Crop object” применяет к объекту анимацию обрезки с помощью CSS-свойства clip-path. При указании этого типа анимации в настройках “Start point” и “End point” появляется дополнительное поле “Visible area”, задающее процент “видимости” объекта на данном этапе.

Диапазон анимации (область окна, где начинается и заканчивается анимация) задается следующими параметрами:

• Start Point (ранее Offset) – точка, где начинается анимация объекта. Задается как процент от высоты окна, отсчитываемый от низа окна. Например, 30% означает, что при стиле анимации “Default” объект начнет трансформироваться, когда его верх пересечет условную линию, расположенную в 30% от низа окна.
• End Point (ранее Amplitude) – процент от низа окна, где заканчивается анимация объекта.

Начальное и конечное состояние объекта:

Сами параметры анимации (смещение по X и Y, прозрачность, поворот и масштаб) теперь разбиты на 2 группы:

• Animate From – задает настройки начального состояния объекта (до пересечения Start Point)
• Animate To – задает настройки конечного состояния объекта (к моменту полного пересечения End Point)

Точка привязки при трансформациях задается параметрами:

• X Anchor Point – позволяет применить трансформацию к объекту относительно его левого края, центра или правого края
• Y Anchor Point – позволяет применить трансформацию к объекту относительно его верха, центра или низа

Animation Timing (настройка времени трансформации)

• Duration -задает время в секундах, за которое будет выполнена трансформация объекта
• Squeeze interval – применяется только для объектов, состоящих из нескольких однотипных айтемов (посты внутри блоггера или сервисов, люди в шорткоде Team, слова в текстовом виджете и т.п.). Задает коэффициент “сжатия” (если меньше 1) или “растяжения” (больше 1) анимации отдельных айтемов – временной интервал перед трасформацией каждого следующего айтема умножается на этот коэффициент. Что позволяет сделать анимацию не линейной, а ускоряющейся или замедляющейся.
• Scroll lag – задает дополнительное смещение (в пикселах) относительно “Start point” для того, чтобы анимация объекта начиналась позднее других, настроенных на тот же “Start point”. Удобно применять для нескольких объектов одного уровня или в комбинации с разбивкой текста на слова или символы, чтобы каждое слово (символ) начинали свое движение с “запаздыванием” по отношению к предыдущим (после того, как страница будет проскроллена еще на заданное число пикселей)

Text Animation (применяется только к виджетам Heading и Title)

Позволяет анимировать текстовый блок целиком или по словам или по символам (которые будут играть роль отдельных объектов-айтемов, к которым применяются настройки трансформации).

Причем анимация по словам или символам может происходить “сразу” – когда надпись достигла “Start point” каждое слово (символ) анимируется по очереди с небольшой временной задержкой или (если включен параметр “Separate animation”) – каждое слово (символ) анимируется как отдельный объект с учетом “Scroll lag”

Mouse Animation

Включает для объекта режим “слежения” за перемещением мыши и плавно двигает объект при движении курсора мыши.

• Transform Type – задает вид (алгоритм) трансформации
• Momentum – коэффициент усиления реакции на движения мыши
• Z-index – степень “близости” объекта к зрителю. Чем “ближе” объект, тем сильнее на него влияет движение мыши
• Mouse handler – область, при перемещении мыши над которой объект должен реагировать и тоже перемещаться