Mobilné Správy, Gadgety, Blogy's Secenziami

Ako pridať efekt hladkej zmeny farby pozadia v programe WordPress

Chcete na svoj web WordPress pridať efekt hladkej zmeny farby pozadia? Možno ste videli na niektorých populárnych webových stránkach, kde farba pozadia konkrétnej oblasti alebo celá webová stránka automaticky prepína z jednej farby na druhú. Tento krásny efekt vám môže pomôcť prilákať pozornosť používateľov a zlepšiť interakciu s vašimi webovými stránkami. V tomto článku vám ukážeme, ako ľahko pridať hladký efekt zmeny farby pozadia v programe WordPress.

<img title = "Pridať efekt hladkej zmeny farby pozadia na WordPress" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bgcolorchangewp.png" alt = "Pridať efekt hladkej zmeny farby pozadia vo WordPress” width=”550″ height=”340″ class=”alignnone size-full wp-image-50813″/>

Aký je efekt zmeny farby pozadia?

Hladký efekt zmeny farby pozadia umožňuje automatický prechod medzi rôznymi farbami pozadia. Zmena nastáva pomaly prechádzajúcimi rôznymi farbami, až kým nedosiahne konečnú farbu. Vyzerá to takto:

<img title = "Animácia efektu zmeny farby" src = "https://blogging-techies.com/wp-content/uploads/2020/03/bganimate.gif" alt = "Animácia efektu zmeny farby” width=”550″ height=”231″ class=”alignnone size-full wp-image-50814″/>

Táto technika sa používa na upútanie pozornosti používateľa pomocou hladkých efektov, ktoré sú príjemné pre oči.

Po tomto sa pozrime na to, ako pridať tento plynulý efekt zmeny farby pozadia na akúkoľvek tému WordPress.

Pridajte efekt hladkej zmeny farby pozadia do WordPress

Tento tutoriál vyžaduje, aby ste do svojich súborov WordPress pridali kód. Ak ste to ešte neurobili, prečítajte si nášho sprievodcu o tom, ako skopírovať a prilepiť kód do WordPress.

Najprv musíte zistiť triedu CSS oblasti, ktorú chcete zmeniť. Môžete to urobiť pomocou nástroja Kontrola v prehliadači. Stačí kliknúť myšou na oblasť, ktorú chcete zmeniť, a kliknutím pravým tlačidlom myši vyberte nástroj Kontrola.

<img title = "Nájdite triedu CSS" src = "https://blogging-techies.com/wp-content/uploads/2020/03/findcssclass.png" alt = "Vyhľadajte triedu CSS” width=”550″ height=”303″ class=”alignnone size-full wp-image-50810″/>

Ďalej musíte napísať triedu CSS, na ktorú chcete zacieliť. Napríklad na snímke obrazovky vyššie chceme ukázať na oblasť miniaplikácií v spodnej časti, ktorá obsahuje hlavičku stránky triedy CSS.

V ďalšom kroku musíte v počítači otvoriť textový editor a vytvoriť nový súbor. Tento súbor by ste mali uložiť ako súbor wpb-background-tutorial.js na pracovnej ploche.

Ďalej musíte do svojho súboru JS pridať nasledujúci kód:

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);
         });
         }); 
 

Ak študujete tento kód, všimnete si, že sme použili triedu CSS, na ktorú chceme v kóde ukázať. Pridali sme tiež štyri farby. Náš efekt jemného pozadia začne od prvej farby, potom prejde na ďalšiu farbu a pokračuje cez tieto farby.

Nezabudnite uložiť zmeny do súboru.

Ďalej musíte pomocou servera FTP odovzdať súbor wpb-bg-tutorial.js do priečinka / js / vašej témy WordPress. Ak téma neobsahuje priečinok js, musíte ho vytvoriť.

<img title = "uploadjs" src = "https://cdn3.wpbeginner.com/wp-content/uploads/2018/02/uploadjs.png" alt = "Nahrajte súbor javascript.” width=”550″ height=”278″ class=”alignnone size-full wp-image-50811″/>

Po nahraní súboru JavaScript je čas na jeho nahranie do programu WordPress.

Mali by ste pridať nasledujúci kód do súboru features.php témy.

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' ); 
 

Tento kód správne načíta súbor JavaScript a závislý skript jQuery, ktorý potrebujete, aby tento kód fungoval.

To je všetko, teraz môžete navštíviť ich webovú stránku a vidieť ich v akcii. V oblasti, na ktorú ste zacielili, si všimnete efekt hladkej zmeny farby pozadia.

Existuje mnoho ďalších spôsobov, ako použiť farby pozadia WordPress na upútanie pozornosti používateľa alebo na zvýraznenie obsahu. Môžete napríklad vyskúšať:

  • Pridajte obrázky na celú obrazovku
  • Pridajte videá na celú obrazovku
  • Náhodné farby pozadia pri každom načítaní stránky
  • Pridajte efekty paralaxy k ľubovoľnej téme WordPress
  • Navrhujte jednotlivé príspevky s rôznym zázemím

Dúfame, že vám tento článok pomohol naučiť sa, ako ľahko pridať efekt hladkej zmeny farby pozadia v programe WordPress. Môžete tiež navštíviť náš zoznam najlepších doplnkov na tvorbu stránok WordPress, ktoré môžete vyskúšať.

Ak sa vám tento článok páčil, prihláste sa na odber nášho kanála YouTube pozerať videozáznamy z programu WordPress. Nájdete nás aj na Twitter a Facebook,