Сегодня нам сообщили о новом обновлении на Divi который предлагает так называемые эффекты анимации прокрутки. Мы взглянули на это, и в этом уроке мы суммируем то, что вам следует ожидать.
Давайте начнем.
Каковы эффекты прокрутки?
Эффекты прокрутки — это настраиваемые анимации, которые реагируют на ваши действия. посетителей когда они прокручивают страницу вверх и вниз. В отличие от традиционной анимации, эффекты прокрутки напрямую связаны с поведением прокрутки вашего экрана. посетитель. Скорость и направление анимации зависят от скорости и направления прокрутки посетитель. Временная шкала анимации зависит от положения элемента в окне браузера.
Звучит сложно, но с Divi, это довольно просто
Любой элемент можно анимировать, используя комбинацию эффектов масштабирования, вращения, горизонтального и вертикального перемещения, непрозрачности и размытия. Вы контролируете величину каждого эффекта в разных точках анимации, а затем Divi позаботится обо всем остальном, создавая красивые переходы по мере того, как эти элементы появляются и перемещаются в вашем поле зрения. посетитель. Создавайте простые анимации, которые придадут тонкую глубину и изысканность, или комбинируйте эффекты и анимируйте несколько элементов, чтобы создать впечатляющие всплески активности, которые поразят ваше воображение. посетителей!
6 новых шести уникальных эффектов
Эффекты доступны на выбор или в комбинациях. Divi поставляется с шестью различными эффектами прокрутки, каждый из которых можно индивидуально настроить с помощью нашего нового пользовательского интерфейса с эффектами прокрутки. Вы также можете комбинировать любые эффекты для создания более сложных анимаций.
Вертикальное движение
Эффект вертикального движения позволяет любому элементу перемещаться вверх и вниз по странице в зависимости от скорости и направления прокрутки посетителя. Результат - эффект параллакса! Теперь все можно использовать для создания эффектов параллакса с Divi. Вы даже можете комбинировать вертикальное движение с фоновыми изображениями параллакса для создания действительно впечатляющих дизайнов.
Горизонтальное движение
Эффект горизонтального перемещения аналогичен эффекту вертикального перемещения, за исключением того, что он позволяет перемещать элементы слева направо на экране в зависимости от направления и скорости прокрутки посетителя. . Вы даже можете комбинировать вертикальное и горизонтальное движение, что дает вам полный контроль над перемещением любого элемента!
Контекстное размытие
Эффект размытия будет перемещать элементы в фокус и расфокусироваться в зависимости от скорости и направления прокрутки посетителя. Поскольку Divi позволяет вам контролировать начальные, средние и конечные значения размытия, вы можете сфокусировать элементы прямо тогда, когда они находятся перед глазами посетителя. Это отличный способ привлечь внимание к важной информации.
расплавленный
Эффект затухания с элементами постепенно появляется и исчезает в зависимости от скорости и направления прокрутки посетителя. Вы можете смешивать элементы, заставлять их исчезать или и то, и другое. Комбинация затухания, размытия и масштабирования может создать действительно сложные анимации, которые добавят дополнительный фактор в ваш дизайн.
Эффект масштабирования
Эффект масштабирования увеличивает или уменьшает размер любого элемента в зависимости от скорости и направления прокрутки посетителя. Если вы хотите привлечь внимание к определенному элементу, например к призыву к действию, вы можете установить эффект масштабирования, чтобы увеличивать размер элемента по мере его приближения к центру кадра. окно. Конечно, есть много других возможностей!
Эффект вращения
Эффект поворота с вращает элемент в любом направлении в зависимости от скорости и направления прокрутки посетителя. Тонкое вращение действительно может оживить сцены. Просто небольшое вращение в сочетании с горизонтальным движением может выглядеть великолепно! Или пусть элементы крутятся по кругу.
Новый интуитивно понятный интерфейс
Настоящая прелесть эффектов прокрутки Divi заключается в их простоте использования! Появился новый пользовательский интерфейс, который упрощает процесс создания веб-анимаций, так что они доступны каждому. Одним щелчком мыши вы можете добавить или комбинировать один из шести эффектов прокрутки Divi. Прямо из коробки они будут отлично смотреться! Затем вы можете точно настроить эффекты для создания еще более продвинутой анимации.
Один щелчок и все!
Хотите добавить к модулю эффект прокрутки? Один щелчок добавит эффекта, и это тоже будет отлично смотреться! Чтобы добавить эффект прокрутки, просто перейдите к новой группе параметров «Эффекты прокрутки» на вкладке «Дополнительно» любого модуля, строки, столбца или раздела. Одновременно можно активировать несколько эффектов, и эффекты будут объединены в одну плавную анимацию, которая красиво трансформируется при прокрутке.
Вы хотите полный контроль? у тебя есть это !
После того, как вы включили эффект прокрутки, вы получите полный контроль над величиной эффекта в каждой точке анимации. Управляя начальным, средним и конечным значениями, вы контролируете что делает анимация. После того, как значения установлены, Divi позаботится обо всем остальном и будет перемещать элемент по мере его перемещения по окну браузера, создавая анимацию.
- Начальное значение - Состояние начальной анимации, используемой, когда элемент входит в нижнюю часть окна браузера.
- Промежуточное значение - Промежуточное состояние анимации, которое будет передано при перемещении элемента в середину окна.
- Конечное значение - Конечное состояние анимации, которое происходит, когда элемент покидает окно браузера в верхней части экрана.
Например, эффект непрозрачности с начальным значением 0 (невидимый), средним значением 100 (полностью видимый) и конечным значением 0 (невидимый) изменится из невидимого состояния, когда он войдет в window, пока оно не станет 100% видимым в середине окна, затем оно исчезнет в невидимом состоянии при выходе из окна.
Настройка временной шкалы анимации
Вы можете настроить не только значения анимации, но и временную шкалу анимации. Пользовательский интерфейс временной шкалы представляет собой высоту окна браузера. Каждый ключевой кадр анимации может запускаться в другом месте окна просмотра. Это позволяет вам управлять началом, окончанием и синхронизацией анимации в зависимости от местоположения анимированного элемента по оси Y окна браузера.
- Начальная позиция ключевого кадра - Этот параметр управляет началом анимации. Если вы хотите отложить анимацию, перетащите положение начального ключевого кадра внутрь.
- Центральное положение ключевого кадра - Это контролирует точку, в которой анимация достигает своего центрального значения анимации. Это не обязательно должно быть точно посередине временной шкалы анимации. Вы можете переместить средний ключевой кадр в любое место в окне.
- Конец позиции ключевого кадра - Этот элемент управления используется для завершения анимации. Если вы хотите, чтобы анимация завершилась до того, как клип выйдет из окна браузера, вы можете перетащить положение конечного ключевого кадра внутрь.
Добавляйте статические состояния к любой анимации
Вы также можете добавлять паузы к своей анимации, увеличивая продолжительность статического среднего значения эффекта. Чтобы создать статическую продолжительность анимации, щелкните две стрелки при наведении курсора на средний ключевой кадр. Затем вы можете расширить средний ключевой кадр, перетаскивая его края вперед и назад. В этот момент анимации элемент останется статичным. По окончании статической продолжительности анимация продолжит переход к своему окончательному значению.
Что вы думаете об этих новых функциях? Не стесняйтесь делиться своим мнением в комментариях.
