ДЕЛАЮ САЙТЫ В "TILDA"

Качественно, недорого, соблюдаю сроки

Заказать!

Хотите увидеть красивую бабочку?

ДА!

Хотите увидеть красивое небо и цветы?

ДА!

Хотите увидеть красивый закат?

ДА!

БАЗОВАЯ АНИМАЦИЯ

Раздел базовой анимации имеет несколько опций:
Animation — это разные варианты анимации появления элемента;
Parallax — это настройки эффекта параллакса элемента;
Fixing — это настройки эффекта фиксации

У анимации появления есть несколько вариантов — простое появление (Fade In), появление справа, слева, сверху и снизу (Fade In Right, Fade In Left, Fade In Up,Fade In Down) и появление с увеличением (Zoom In).

В настройках каждого вида анимации появления есть общие опции Duration, Delay и Trigger Offset.

Duration — это время анимации в секундах. Оно позволяет установить, как долго будет появляться элемент;
Delay — задержка перед началом анимации в секундах;
Trigger Offset — это отступ в пикселях от нижнего края Window-контейнера, при котором начнет воспроизводиться анимация.

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

При использовании появления с увеличением (Zoom In) есть параметр Scale — если он меньше 100%, то объект увеличивается до исходного размера, если больше — то уменьшается.

ПРИМЕРЫ АНИМАЦИИ

Гулечка

Тайсина

ПРОДОЛЖЕНИЕ БАЗОВАЯ АНИМАЦИЯ

Parallax

ПРИМЕРЫ АНИМАЦИИ

Гулечка

Тайсина

Анимация параллакса имеет две настройки — параллакс может быть по скроллу и по движению мыши.

В настройках параллакса по скроллу есть настройка скорости параллакса (Speed). Если скорость указана меньше, чем 100%, то элемент движется медленнее скролла страницы, если скорость больше 100% — то быстрее.

В настройках параллакса по движению мыши есть настройки дистанции по осям X и Y, они устанавливают максимальное отклонение элемента при параллаксе.

Гулечка

Тайсина

100%

ПРОДОЛЖЕНИЕ БАЗОВАЯ АНИМАЦИЯ

Fixing

У анимации фиксации есть выбор настройка области фиксации объекта. Это та область экрана, (верх, центр, низ) относительно которой стартует эффект фиксирования. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom).

Настройка Trigger Offset — это точка начала фиксации объекта относительно выбранного Window Top / Window Center / Window Bottom.

Distance — это расстояние в пикселях, которое должен пройти объект в режиме фиксации.

Цель — применить фиксацию к двум объектам так, чтобы первый сразу залипал посередине страницы, а второй в тот момент, когда встретиться с первым. Вот так: как в примере выше

ДОПУСТИМ: Размеры фигур 100x100 px. Расстояние между фигурами 300px. Расстояние = Отступ второго объекта - Высота первого

Фактически круг проходит до квадрата и потом они скроллятся вместе. Кругу назначаем Дистанс Расстояние межуд обьектами МИНУС размер круга, триггер 0. Квадрату НИЧЕГО проходить не надо, ДИСТАНС 0, НО ТРИГГЕР 100

ИЛИ : Начните с верхнего объекта. Так удобнее рассчитать точки начала анимации для остальных. У него точка начала анимацииточка равна 0px. Это значит, что первый объект залипнет точно по центру экрана.

Нижний объект должен залипнуть когда коснется верхнего. Это значит, что его точка начала анимации будет ниже на высоту первого объекта. Ставим отступ100px.

ИКОНКА 1

ИКОНКА 2

ИКОНКА 3

ПОШАГОВАЯ АНИМАЦИЯ

Создание пошаговой анимации отменит все настройки базовой анимации для элемента.

Выбор условия начала анимации
Создание пошаговой анимации начинается с выбора Event — условия, когда начнет проигрываться анимация. Существует пять условий:
-Element on Screen — анимация начинается при появлении элемента на экране;
-Block on Screen — анимация начинается при появлении на экране всего текущего блока;
-On Scroll — анимация запускается и продолжается во время скролла;
-On Hover — анимация появляется при наведении на элемент;
-On Click — анимация начинается при клике на элемент.

У начала анимации есть дополнительные опции Start Trigger, Loop и Trigger Offset.

-Start Trigger — это то, к чему будет привязана анимация или что будет являться ее триггером. Есть выбор из трех областей — верхней границы (On Window Top), центра экрана (On Window Center) и нижней границы (On Window Bottom);
-Trigger Offset — это смещение начала анимации объекта относительно выбранного Window Top / Window Center / Window Bottom;
-Loop — это опция зацикливания анимации.

ВАЖНО:
Чтобы изменить начальное состояние объекта, например, чтобы объект в начале был невидим (значение Opacity равное нулю), нужно добавить первый шаг с этим состоянием и длиной (Duration) в 0 секунд.

У каждого шага есть набор свойств: Duration, Move, Scale, Opacity, Rotate, Easing и Delay.

Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.

ПРИМЕР ПОШАГОВОЙ АНИМАШКИ

АНИМАЦИЯ