Страница оптимизирована для просмотра с мобильных устройств.
Вы можете нажать CTRL+SHIFT+M (для firefox), чтобы посмотреть вид страницы на разных экранах.
Или используйте QR-код
На мобильном экране реализован вариант мобильного меню.
Вы можете нажать CTRL+SHIFT+M (для firefox), чтобы посмотреть вид страницы на разных экранах.
Или используйте QR-код
На мобильном экране реализован вариант мобильного меню.
Блок с формой — важнейшая часть наряду с первым экранам. Если цель лендинга получить нового подписчика или посетителя вебинара, то самым важным становится этот блок.
Интерактивные
сценарии взаимодействия с пользователем
сценарии взаимодействия с пользователем
Простые эксперименты с пошаговой анимацией, направленные на взаимодействие с пользователем.
Ниже приведены примеры использования пошаговой анимации в оформлении блоков с кнопками. Попробуйте воспроизвести эти эффекты или придумайте свой сценарий интерактивного взаимодействия с использованием триггерной или пошаговой анимации. Оптимизируйте под пять экранов.
Обычно состоит из заголовка, подзаголовка и собственно формы/кнопки.
Ниже приведены примеры использования пошаговой анимации в оформлении блоков с кнопками. Попробуйте воспроизвести эти эффекты или придумайте свой сценарий интерактивного взаимодействия с использованием триггерной или пошаговой анимации. Оптимизируйте под пять экранов.
Обычно состоит из заголовка, подзаголовка и собственно формы/кнопки.
Параметры пошаговой анимации
Duration — длина анимации в секундах;
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.
ЕЩЕ БОЛЬШЕ ПРИМЕРОВ АНИМАЦИЙ НА ДЕМОНСТРАЦИОННОЙ СТРАНИЦЕ ТИЛЬДЫ (там написано, КАК РАБОТАЕТ анимация и как ее СОЗДАТЬ).
Move — координаты, куда передвигается элемент относительно начального расположения. Их можно задать как значениями, так и передвинуть элемент;
Scale — процент увеличения или уменьшения элемента к концу этого шага;
Opacity — значение прозрачности элемента к концу шага;
Rotate — поворот элемента в градусах к концу шага;
Easing — выбор эффекта выполнения анимации: Linear — это линейное выполнение анимации, easeIn, easeOut, easeInOut — это замедление в начале, конце или в начале и конце анимации, bounceFin — это небольшой отскок элемента в конце анимации;
Delay — задержка перед выполнением анимации.
ЕЩЕ БОЛЬШЕ ПРИМЕРОВ АНИМАЦИЙ НА ДЕМОНСТРАЦИОННОЙ СТРАНИЦЕ ТИЛЬДЫ (там написано, КАК РАБОТАЕТ анимация и как ее СОЗДАТЬ).
Давление
Интерфейс не оставляет пользователю выхода, кроме как принять предлагаемое действие.
Простейшая анимация по наведению (on hover)
Заголовок и описание при увеличении кнопки исчезают (кнопка для них является триггером).
Заголовок и описание при увеличении кнопки исчезают (кнопка для них является триггером).
Тайна
Поиски клада
Новые возможности спрятались где-то совсем рядом...
Проведи мышкой внутри квадрата и найди их
Тапай внутри квадрата — разгадка рядом
Простейшая анимация по наведению (on hover). Первым шагом с нулевым временем срабатывания настроено 100% прозрачность кнопки. В этом случае — элемент изначально не виден на экране.
В мобильной версии анимация настроена по клику
В мобильной версии анимация настроена по клику
Общение
вызываем эмпатию через интерактив с пользователем
Если нажать на эту кнопку...
...то возможно что-то изменится...
...и мы подружимся...
Немного более сложный вид анимации.
Создано три разных кнопки со срабатыванием по клику на кнопку-тригер (та, что видна с самого начала).
Анимация в мобильной версии настроена аналогично.
Создано три разных кнопки со срабатыванием по клику на кнопку-тригер (та, что видна с самого начала).
Анимация в мобильной версии настроена аналогично.
Посмотреть видео настроек
Скрыть видео
Заголовок
Подзаголовок
