Как добавить эффект плавного изменения цвета фона в WordPress

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

Содержание статьи

1 Что такое эффект плавного изменения цвета фона?
2 Добавление эффекта плавного изменения цвета фона в WordPress

Что такое эффект плавного изменения цвета фона?

Плавный эффект изменения цвета фона позволяет автоматически переключаться между различными цветами фона. Изменение происходит медленно, проходя через разные цвета, пока не достигнет окончательного цвета. Это выглядит так:

Этот метод используется для того, чтобы привлечь внимание пользователя с нежными эффектами, которые приятны для глаз.

Добавление эффекта плавного изменения цвета фона в WordPress

Эта инструкция требует, чтобы вы добавляли код в свои файлы WordPress.

Во-первых, вам нужно узнать класс CSS области, которую вы хотите изменить. Вы можете сделать это, используя инструмент Inspect в своем браузере. Просто наведите указатель мыши на область, которую вы хотите изменить, и щелкните правой кнопкой мыши, чтобы выбрать инструмент «Осмотр».

Затем вам нужно записать класс CSS, для которого вы хотите настроить таргетинг. Например, на скриншоте выше мы хотим настроить таргетинг на область виджета внизу, которая имеет заголовок страницы класса CSS.

На следующем шаге вам нужно открыть текстовый редактор на вашем компьютере и создать новый файл. Вам необходимо сохранить этот файл как wpb-background-tutorial.js на рабочем столе.

Затем вам нужно добавить следующий код внутри вашего JS-файла:

jQuery(function($){
        $('.page-header').each(function(){
            var $this = $(this),
            colors = ['#ec008c','#00bcc3','#5fb26a','#fc7331'];
            setInterval(function(){
                var color = colors.shift();
                colors.push(color);
                $this.animate({backgroundColor: color}, 2000);
            },4000);
        });
        });

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

Не забудьте сохранить изменения в файле.

Затем вам нужно загрузить файл wpb-bg-tutorial.js в папку / js / folder темы WordPress с помощью FTP. Если в вашей теме нет папки js внутри нее, вам нужно ее создать.

После загрузки вашего файла JavaScript пришло время загрузить его в WordPress.

Вам нужно добавить следующий код в файл functions.php вашей темы .

function wpb_bg_color_scripts() {   
wp_enqueue_script('wpb-background-tutorial',  get_stylesheet_directory_uri() .'/js/wpb-background-tutorial.js',array('jquery-color' ),'1.0.0', true );
 }
add_action('wp_enqueue_scripts','wpb_bg_color_scripts' );

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

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