Хочаце дадаць плаўны эфект змены колеру фону на свой сайт WordPress? Магчыма, вы бачылі на некаторых папулярных вэб-сайтах, дзе колер фону пэўнай вобласці або ўсёй вэб-старонкі аўтаматычна змяняецца з аднаго колеру на іншы. Гэты прыгожы эфект можа дапамагчы вам прыцягнуць увагу карыстальнікаў і палепшыць узаемадзеянне на вашым сайце. У гэтым артыкуле мы пакажам вам, як лёгка дадаць плыўны эфект змены колеру фону ў WordPress.
Што такое эфект плаўнага змены колеру фону?
змест
Плаўны эфект змены колеру фону дазваляе аўтаматычна пераключацца паміж рознымі колерамі фону. Змена адбываецца шляхам павольнага праходжання праз розныя колеры да дасягнення канчатковага колеру. Ці выглядае гэта так:
Гэты прыём выкарыстоўваецца для прыцягнення ўвагі карыстальніка з дапамогай мяккіх эфектаў, якія прыцягваюць погляд. З улікам сказанага, давайце паглядзім, як дадаць гэты плаўны эфект змены колеру фону ў любую тэму WordPress.
Даданне плыўнага эфекту змены колеру фону ў WordPress
Гэты падручнік патрабуе ад вас дадаць код у вашыя файлы WordPress. Калі вы не рабілі гэтага раней, азнаёмцеся з нашым кіраўніцтвам аб тым, як скапіяваць і ўставіць код у WordPress. Спачатку вам трэба знайсці клас CSS для вобласці, якую вы хочаце змяніць. Вы можаце зрабіць гэта з дапамогай інструмента Inspect у вашым браўзеры. Проста навядзіце курсор на вобласць, якую вы хочаце адрэдагаваць, і пстрыкніце правай кнопкай мышы, каб выбраць інструмент "Праверка".
Далей вам трэба напісаць клас CSS, на які вы хочаце арыентавацца. Напрыклад, на здымку экрана вышэй мы хочам нацэліцца на вобласць віджэтаў унізе, якая мае клас CSS «загаловак старонкі». На наступным этапе вам трэба адкрыць просты тэкставы рэдактар на вашым кампутары і стварыць новы файл. Вам трэба захаваць гэты файл з імем wpb-background-tutorial.js на працоўным стале. Затым вам трэба дадаць наступны код у файл JS: jQuery (функцыя ($) { $ ('.Page-header').Each (функцыя () {var $this = $(this), колеры = ['# 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/ вашай тэмы 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, неабходны для працы гэтага кода. Вось і ўсё, цяпер вы можаце наведаць свой вэб-сайт, каб убачыць яго ў дзеянні. Вы заўважыце эфект плыўнай змены колеру фону ў абранай вобласці. Ёсць шмат іншых спосабаў выкарыстоўваць фонавыя колеры ў WordPress, каб прыцягнуць увагу карыстальнікаў або зрабіць ваш кантэнт выдатным. Напрыклад, вы можаце паспрабаваць: Мы спадзяемся, што гэты артыкул дапамог вам даведацца, як лёгка дадаць эфект плыўнай змены колеру фону ў WordPress. Вы таксама можаце азнаёміцца з нашым спісам лепшых убудоў для стварэння старонак WordPress. Калі вам спадабаўся гэты артыкул, падпішыцеся на наш канал YouTube для відэа-ўрокаў WordPress. Вы таксама можаце знайсці нас у Twitter і Facebook.
Першапачаткова апублікавана 2021 02:24:06.
