Pro paralax efekt existuje vynikající free Js knohivna Rellax. Jak ji implementovat a paralax efektu dosáhnout?
Nejprve si knihovnu přidáme do WordPressu, abychom ji mohli používat. Do souboru functions.php stačí přidat tento kousek kódu:
function enqueue_rellax_script() {
// Získání URL k souboru ve složce child theme
$rellax_url = get_stylesheet_directory_uri() . '/rellax-master/rellax.min.js';
// Přidání skriptu
wp_enqueue_script('rellax', $rellax_url, array(), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_rellax_script');
Na stránce je pak např. tato struktura:
<section id="sekce"> <div id="blok" data-rellax-speed="-5"></div> <h2 class="heading">Třeba nějaký nadpis</h2> <p>Lorem Ipsum...</p> </section>
Blok id=”blok” má nastavený obrázek na pozadí, na nějž se bude parallax efekt aplikovat. Nastavíme mu data atribut data-rellax-speed, který určuje míru efektu.
Do stránky je pak třeba přidat tento JS:
document.addEventListener("DOMContentLoaded", function () {
var rellax = new Rellax('#blok', {
center: true, // Vycentruje parallax efekt
});
});
Responzivita
Pokud je potřeba míru efektu přizpůsobit velikosti displeje, což často je, stačí přidat další data atributy:
<section id="sekce">
<div id="blok" data-rellax-speed="7"
data-rellax-xs-speed="-5"
data-rellax-mobile-speed="3"
data-rellax-tablet-speed="-8"
data-rellax-desktop-speed="1">
</div>
<h2 class="heading">Třeba nějaký nadpis</h2>
<p>Lorem Ipsum...</p>
</section>
a do spouštěcího JS pak přidat:
document.addEventListener("DOMContentLoaded", function () {
var rellax = new Rellax('#blok', {
center: true, // Vycentruje parallax efekt
breakpoints:[576, 768, 1201]
});
});
Poznámka
V tomto případě chceme paralax efekt jen na obrázek na pozadí, proto má div id=”blok” position: absolute, width: 100% a height: 100%. Tím se roztáhne přes celou plochu, kterou dovoluje sekce. Nadpis a odstavec jsou pak vloženy a napozicovány normálně.
Pokud bychom chtěli paralax efekt i na nadpis a odstavec, pak bychom div “blok” vložili normálně a nadpis a odstavcem vložili až do tohoto bloku.