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

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

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

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

Начнём с простого. Возьмём, например, вот эту кнопку. Перейдём в «Стиль» и при наведении поменяем цвет текста. Сделаем его графитовым. Тип фона: цвет поменяем, делаем его белым. Цвет границы сделаем рыжим. Границу сделаем сплошную. Её толщину — 1. Цвет зададим тот же рыжий. Теперь при наведении на кнопку, она меняется. Цвет меняется.

Можно задать длительность перехода для более плавного перехода. Например, давайте зададим 0,8 секунды. Теперь она более плавно переходит.

Одну секунду. Можно задавать в миллисекундах. Это уже 200, 300, 1000.

Также есть анимация при наведении. По умолчанию она отсутствует, но можно выбрать какую-нибудь из списка. Тут их очень много. Можно самостоятельно все изучить. Давайте выберем самую верхнюю, например, и теперь при наведении кнопка как бы увеличивается. Давайте ещё какую-нибудь. Вот, давайте такую.

Вот такие эффекты. Давайте теперь выберем, например, эту картинку. Здесь тоже в «Стилях» можно сделать анимацию при наведении. Добавить, например, прозрачность, когда наводим на картинку. Также длительность перехода. И также можно сделать анимацию. Например, давайте вот эту — Grow. Прозрачность в ноль опять.

Я хочу, например, сделать так, чтобы при наведении у этой картинки была тень. Но её почему-то здесь нельзя сделать. Только тень бокса. Давайте посмотрим. По умолчанию поставим.

Видите? Она по умолчанию на постоянной основе. Что при наведении, что не при наведении. А я хочу, чтобы она была именно при наведении. Тут так сделать нельзя. Давайте сбросим. Можно сделать, например, вот так.

Зайти на вкладку «Граница», нажать вкладку «Наведение» и сделать тень бокса. Но, опять же, получается, что тень задаётся к этому боксу. Вот так вот. Опять не то. Можно, конечно, сделать, например, в «Стилях» ширину на 100%, а здесь сделать произвольную ширину… сколько у нас… 37 было. И, опять же, когда картинка увеличивается в размерах, тень она перекрывает. Опять не так, не получается.

Поможет нам опять пользовательский CSS. Набираем: selector, выбираем img (картинку). Прописываем: hover. И задаём стиль: box-shadow, например, 0-0 10px. И пропишем: rgba. В круглых скобочках: 0,0,0,0.7. И теперь при наведении у нас появляется тень.

Давайте в «Стилях» тут наведение уберём.

Сделаем по умолчанию. В «Расширенных», «Границах» тоже обнулим. Вот такой эффект получается.

Давайте сейчас создадим эффект параллакса. Например, для этой секции. Нажмём здесь плюсик, создадим новую структуру и в «Стилях» в «Тип фона» — выберем изображение. Из предыдущего урока возьмём фотографию, уже адаптированную в webp. Выбираем.

Теперь будем стилизовать.

Разрешение (Image Resolution) мы сделаем «Полный», как и стоит по умолчанию. Позиционирование поставим «Центр Центр». Привязку сделаем фиксированную. После того как мы выбрали фиксированную, у нас появилось предупреждение: «Закрепление работает только на ПК». Повтор мы сделаем «Не повторять», а размер дисплея сделаем «Перекрыть».

Также мы зададим цвет самому контейнеру. Графит. Это нужно для того, чтобы если по какой-то причине фотография не прогрузилась, то у нас хотя бы был цвет контейнера.

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

Давайте ещё для наглядности добавим сюда контейнер. Ширину макета сделаем «Во всю ширину» и где-нибудь 50% ее поставим. Так, основному макету мы зададим Justify Content «Конец», а для этого контейнера зададим направление «Столбец —вертикальный». Теперь можно сюда добавить заголовок, текст, кнопку. Так, зададим Justify Content по центру.

Теперь текст давайте выберем отсюда. Скопируем. Так, посмотрим здесь. Font-size — 96, line-height — 96. Давайте в «Стилях» зададим цвет — белый. Здесь — 96, высоту линии тоже 96.

Возьмём отсюда текст и скопируем. Вставим. Также посмотрим здесь стили. Font-size — 30, line-height — 39. Также цвет текста сделаем белый, размер — 30, 39. Давайте ещё уменьшим. В «Расширенных» поставим «Произвольно», примерно вот так, чтоб буква «с» переходила на следующую строчку, как вот здесь.

И теперь посмотрим, как это выглядит. Весь контент двигается, а картинка остаётся на месте. Это и есть эффект параллакса. Давайте обновим и посмотрим на сайте.

Практически для всех виджетов можно сделать анимацию. Для этого надо зайти во вкладку «Расширенные» и «Эффекты движения». Давайте перейдём к этому блоку и зададим вот этому заголовку какую-нибудь анимацию. Вот, давайте: «Эффекты движения» и «Анимация при появлении». Например, мы сделаем появление сверху (Fade In Down). Вот так. Давайте вот этому блоку зададим анимацию: «Эффекты движения» — «Анимация при появлении». Например, появление слева (Fade In Left). Кнопке мы зададим появление снизу (Fade In Up). Этому изображению мы зададим анимацию (эффект движения) справа (Fade In Right).

Также можно задать задержку анимации. Давайте здесь такую (400), здесь, например, такую (100), здесь — побольше (600), а здесь — по умолчанию оставим. Также можно сделать длительность анимации: быстро, медленно.

И теперь при прокрутке страницы у нас появляется анимация. Давайте ещё раз посмотрим.

Также есть эффекты прокрутки. Так, давайте к какому-нибудь другому виджету, например вот к этому, выберем «Эффекты движения» — «Эффекты прокрутки», и выберем горизонтальную прокрутку. Направление будет влево, скорость оставим по умолчанию. И область просмотра — это область просмотра, когда скроллим, давайте настроим. Область прокрутки уменьшим. А здесь увеличим. Давайте вот так, в ноль.

Также можно сделать этому. Давайте посмотрим «Эффекты прокрутки». Давайте зададим какую-нибудь прозрачность.

И теперь, когда мы прокручиваем страницу, прозрачность у нас постепенно увеличивается. Тут надо настраивать.

Также есть, например, «Эффекты мыши»: «Следование за мышью» — «Противоположное» или «Прямое». Скорость давайте добавим. Чуть-чуть больше. И теперь подвигаем мышью. Давайте попробуем «Противоположное». Для наглядности добавим побольше скорости. Обнулим.

Есть ещё виджеты со встроенной анимацией. Например, «Призыв к действию». Давайте его добавим. Выберем структуру и выберем виджет. Этот виджет можно использовать, Этот виджет можно использовать, например, вот здесь, в «Акциях». Давайте так и сделаем. Сделаем стиль, например «Перекрыть». Добавим изображение. Вот это. «Выбрать». Поменяем на полное изображение (Full). Так, для наглядности давайте продублируем два раза.

Поменяем заголовок. Например, «Хэллоуинское веселье». К этому виджету сделаем. Поменяем местами. Также добавим текст и текст кнопки.

Теперь можно стилизовать. Высоту блока мы зададим фиксированную, примерно 584. Выравнивание по левому краю. Позиция по вертикали будет сверху.

Теперь можно посмотреть эффекты при наведении. По умолчанию тут уже какие-то эффекты стоят. Анимация при наведении, например, Grow стоит. Длительность. Для фона. Давайте поменяем для содержимого на какую-нибудь другую. Например, вот такую. Теперь у нас вот так будет. Или сделаем вот так. Исчезновение. Или вообще можно отключить анимацию. Также можно сделать при наведении. И также её тоже можно отключить. Сделаем по умолчанию и здесь сделаем по умолчанию.

Также можно сделать последовательную анимацию. Давайте включим. И вот такой интересный эффект получается. Последовательно всё.

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

На сегодня у меня всё. Увидимся на следующем уроке. Пока.