Правая панель “Анимация”

Анимация важная часть в дизайне. Именно она позволяет сделать ваш сайт уникальным и запоминающимся для посетителя.

  1. Выбор свойства. Панель выбора css свойства, которое будет изменяться в процессе анимации.
  2. Время анимации. Скорость воспроизведении анимации, определяет то как быстро будет изменяться внешний вид элемента.
  3. Задержка. Время задержки анимации. Используйте данное свойство, если не хотите, что бы анимация начиналась сразу же.
  4. Выезжание. Панель быстрой настройки эффекта выезжания. Достаточно частый эффект, но не самый простой в реализации, поэтому вынесен отдельной настройкой. При желании его можно создать и самостоятельно.
  5. Параллакс эффект. Панель настройки эффекта параллакса. Подробнее о нем напишем тут.
  6. Вид устройства. Выберите устройства, на которых будет работать параллакс.
  7. Отсчет эффекта параллакса. Смещения фона считается не от верха страницы и а от верха элемента. (Вычитается смещение элемента от верха страницы из смещения фона. Т.е. когда верх элемента совпадает с верхом окна то у фона должно быть смещение 0. Если же эта галка не выставлена, то смещение будет = высоте скрола * скорость скрола)

Принцип действия анимации:

Первым делом, необходимо по разному оформить элемент, при двух его состояниях. Например, возьмите текстовый блок и в режиме состояния элемента “без состояния” задайте у него свойство “прозрачность” 10%. Блок станет практически невидимым (лучше указать 0%, что бы не потерять блок из виду в настройках снимите галку “прозрачность”).

Затем выберите состояние “При скроле”. Выберите этот же блок и уже задайте у него прозрачность 100%

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

После этого данное свойство появится в правой панели.

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

Сложная анимация

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

Например, кратно опишем процесс создания анимации на главной странице PIXLI:

Первым этапом была загружена фоновая картинка.

Далее в белую область был перенесен контент. А именно контейнер с серым фоном и блоки, которые создали верхнее меню.

Затем этим элементам поочередно задавались свойства анимации (выезжание и прозрачность).

Далее были вставлены блоки с 1px обводкой для будущих фотографий и анимирована картинка с виджетом. Для этого использовались свойства “Смещения” в блоке “Трансформация” и свойство прозрачности, что бы картинка исчезла после того, как достигнет нужного места. (нужно выставить у прозрачности соответствующее время анимации, что бы виджет исчез четко после переноса.)

И на последнем этапе были загружены блоки с названием и накладки с лайками на фотографии. Последним был присвоен высокий z-index, что бы они были поверх другого контента.

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

И на последнем этапе необходимо было включить в настройках “новой области” свойство синхронного запуска анимации.

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

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