Параллакс

Target

Заголовок

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

Units (Viewport)

Заголовок

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

Start + End (Reverse)

Заголовок

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

Easing

-3
-2
-1
-0.5
0
0.5
1
2
3

Color и Viewport

Заголовок

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

Filter

Заголовок

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

Несколько шагов

Заголовок

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

SVG Stroke

Параметры JavaScript

Опция Значение По умолчанию Описание
easing Number 1 Плавность анимации при прокрутке.
target String false Element dimension reference for animation duration.
viewport Number 1 Диапазон анимации в зависимости от области просмотра.
media Integer|String false Условие для активного состояния - ширина в виде целого числа (например, 640)
или точка останова (например @s, @m, @l, @xl).

Анимированные свойства

Вы можете определить несколько шагов, используя список значений через запятую. (например, х: 0,50,150)

Опция Единица по умолчанию Описание
x px Анимация по горизонтали (translateX).
y px Анимация по вертикали (translateY).
bgy px Анимация фонового изображения (Ось Y).
bgx px Анимация фонового изображения (Ось X).
rotate deg Анимация вращения по часовой стрелке.
scale Анимация масштабирования.
color Анимировать цвет (color) (требуется начальное и конечное значение).
background-color Анимировать цвет фона (background-color) (требуется начальное и конечное значение).
border-color Анимированный цвет границы (border-color) (требуется начальное и конечное значение).
opacity Анимация прозрачности.
blur px Анимация фильтра blur.
hue deg Анимация фильтра hue rotation.
grayscale % Анимация фильтра grayscale.
invert % Анимация фильтра invert.
saturate % Анимация фильтра saturate.
sepia % Анимация фильтра sepia.
stroke Анимированные штрихи в изображениях SVG.