Анимация в блочных темах на ВордПресс без кода
Анимация в блочных темах на ВордПресс без кода
00:00 Введение в микроанимацию
• В блочных темах WordPress можно создавать анимационные эффекты.
• Демонстрация микроанимации: ховер-эффект наведения на карточки и реакция на клик.
01:05 Структура страницы
• Описание структуры страницы: контейнер, обёртка, элементы с карточками и текстами.
• Объяснение работы ховер-эффекта без анимации.
02:24 Настройка классов
• Задание классов для контейнеров и фотографий.
• Роль классов в идентификации элементов.
04:04 Выбор поведения
• Настройка поведения элемента при нажатии.
• Использование произвольного селектора триггера.
06:08 Добавление действий
• Выбор действия при нажатии: удаление или добавление класса, анимация.
• Примеры анимаций: поворот, сдвиг, изменение цвета.
09:14 Ховер-эффект
• Создание ховер-эффекта с использованием родительского класса.
• Настройка поворота карточек на 3 градуса при наведении.
12:29 Завершение настройки
• Проверка и корректировка настроек ховер-эффекта.
• Подчёркивание важности правильного указания родительского класса.
13:38 Настройка карточек
• Карточка три при нажатии на родитель становится меньше на 100 пикселей и перемещается вправо на 0 пикселей.
• Карточка два увеличивается до 200 пикселей.
• На карточках срабатывает hover-эффект, который можно отключить или сделать однократным.
14:36 Проблемы с именованием путей
• Пути нельзя переименовать, что неудобно для понимания их назначения.
• Пример настройки карточки один: изменение размера на 100 пикселей.
15:14 Изменение параметров карточек
• Изменение размера карточки три с 100 на 200 пикселей.
• Изменение положения карточки на 50 пикселей вправо.
• Возможность поворота карточек при клике.
16:49 Работа с нейросетями
• Для увеличения изображения нужно отправить скриншот нейросети и указать нужное свойство, например, ширину.
• По умолчанию нет выпадающих списков свойств, но можно добавлять новые.
17:44 Преимущества использования нейросети
• Нейросеть позволяет учиться и практиковаться без написания кода.
• Связывание элементов происходит через свойства, а не через JavaScript.
19:00 Добавление новых слоёв взаимодействия
• Добавление триггера для срабатывания при входе элемента в окно просмотра.
• Работа с атрибутами и действиями в новых слоях взаимодействия.
19:42 Заключение
• Призыв подписаться на канал, ставить лайки и оставлять комментарии.
• Приглашение на обучение.
