Видели ли вы эти красивые CSS-анимации на популярных сайтах?? Анимированные эффекты, такие как скользящий контент, затухающие блоки функций, прыгающие изображения и т.д. В этой статье мы покажем вам, как легко добавить CSS-анимацию в WordPress без написания кода.
Когда и почему следует использовать CSS-анимацию?
CSS-анимации позволяют привлечь внимание пользователя к различным частям страницы.
Вы можете использовать их для анимации характеристик продукта или кнопки призыва к действию.
Многие сайты используют CSS-анимацию при прокрутке страницы вниз. Это добавляет на страницу элемент повествования, когда элементы продвигаются по мере того, как пользователи прокручивают страницу вниз.
CSS анимации также быстрее, чем флеш или видео. Они быстро загружаются и поддерживаются большинством современных веб-браузеров.
Вы можете добавить CSS-анимации вручную в таблицу стилей вашей темы WordPress или дочерней темы. Однако большинство новичков не хотят редактировать файлы своей темы или тратить время на изучение CSS.
Сказав это, давайте посмотрим, как вы можете легко добавить CSS-анимацию на свой сайт WordPress.
Настройка CSS Animate! Плагин
В этом уроке мы будем использовать плагин. Он позволяет создавать CSS-анимации с помощью WYSIWYG-редактора.
Первое, что вам нужно сделать, это установить и активировать Animate it! плагин. Плагин работает «из коробки», и вам не нужно настраивать никаких параметров.
Просто создайте новый пост, и вы заметите новую кнопку в визуальном редакторе WordPress под названием «Анимировать»!’.
При нажатии на кнопку появится всплывающее окно, в котором вы сможете создать CSS-анимацию. Плагин поддерживает множество CSS-анимаций на ваш выбор.
Сначала вам нужно выбрать стиль анимации. После этого вам нужно выбрать время задержки и продолжительность анимации. Наконец, вам нужно выбрать, когда вы хотите, чтобы анимация появлялась.
Плагин предлагает три варианта. Вы можете запустить анимацию при клике, наведении или смещении прокрутки.
Как только вы будете удовлетворены настройками, вы можете нажать на кнопку Animate it, чтобы увидеть предварительный просмотр анимации.
Затем нажмите на кнопку «Вставить», чтобы добавить анимацию в пост или страницу WordPress. Вы заметите, что плагин добавит в редактор постов шорткод с фиктивным контентом внутри него.
Вам нужно удалить фиктивный контент внутри шорткода и заменить его своим собственным контентом, изображениями или чем-либо еще, что вы хотите анимировать.
Теперь, когда все готово, нажмите на кнопку сохранения или публикации поста, а затем нажмите на кнопку предварительного просмотра. Вы увидите, что ваш контент красиво анимирован.
Надеемся, эта статья помогла вам узнать, как легко добавить CSS-анимацию в WordPress. Вы также можете посмотреть наше сравнение 5 лучших конструкторов страниц WordPress с функцией «перетащи и брось.
Источник: www.wpbeginner.com