logo

Nejjednodušší způsob, jak vytvořit paralaxní rolování s jednoduchou paralaxou

SimpleParallax je velmi jednoduchá a malá JavaScriptová knihovna, která přidává paralaxové animace na jakékoli obrázky.

Efekt paralaxy se přidává přímo na tagy obrázků, není potřeba používat obrázek na pozadí jako většina ostatních knihoven paralaxy. V podstatě můžete na produkční web přidat paralaxové efekty, aniž byste narušili jeho rozložení.

Můžete se také rozhodnout použít paralaxu na obrázky tagů/srcset obrázků. Implementace je poměrně přímočará a animace je plynulá a přirozená.

Instalace

Instalace je velmi jednoduchá. Můžete se rozhodnout zahrnout skript přímo do kódu HTML:

<script src="simpleParallax.js"></script>

Nebo zvolte instalaci pomocí npm/yarn:

#npm
npm install simple-parallax-js

#yarn
yarn add simple-parallax-js

Jakmile jej nainstalujete prostřednictvím správce balíčků, můžete jej importovat následovně:

import simpleParallax from 'simple-parallax-js';

Inicializace

Chcete-li přidat efekt paralaxy, můžete cílit na libovolné obrázky. Například:

<img class="thumbnail" src="image.jpg" alt="image">

Jednoduše přidejte následující kód JavaScript:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

Můžete se také rozhodnout použít paralaxu na více obrázků, něco jako:

var images = document.querySelectorAll(img);
new simpleParallax(images);

Hlavní případy

Ve výchozím nastavení, pokud nezadáte žádné parametry, simpleParallax použije up orientace. Výsledkem bude, že se obrázek při posouvání dolů bude překládat zdola nahoru a při posouvání nahoru shora dolů.

Můžete si vybrat z těchto orientací - nahoru - vpravo - dolů - vlevo - vlevo nahoře - vpravo nahoru - vlevo dolů - vpravo dolů .

Pokud chcete použít různá nastavení na různé obrázky, neváhejte inicializovat několik instancí simpleParallax. Knihovna automaticky přidá nové instance do stejné procesní smyčky jako aktuální instance. Nebude tedy spotřebován žádný extra výkon.

 <img class="left" src="image.jpg" alt="image">
 <img class="right" src="image.jpg" alt="image">
var imageLeft = document.querySelector('.left'),
    imageRight = document.querySelector('.right');

new simpleParallax(imageLeft, { 
    orientation: 'left' 
});
new simpleParallax(imageRight, { 
    orientation: 'right' 
});

Další nastavení

Paralaxový efekt je vytvořen s efektem změny velikosti aplikovaným na obrázek. Tento efekt změny měřítka lze snadno změnit (výchozí hodnota je 1,3 ). Čím vyšší měřítko bude nastaveno, tím rychlejší a viditelnější bude paralaxový efekt.

new simpleParallax(image, { 
    scale: 2 
});

přetečení je další zajímavé nastavení. přetečení je nastaveno na false ve výchozím stavu. Pokud je nastaveno na true , bude obraz přeložen ze svého přirozeného toku. 

new simpleParallax(image, { 
    overflow: true 
});

Užitečné odkazy

  • Github
  • Ukázkový web s příklady
  • Případová studie o médiu