Parallax Scrolling Backgrounds In Pure JavaScript – paraxBg

Preview:

Description:

paraxBg is a tiny, fast, configurable parallax scrolling library for backgrounds.

How to use it:

1. Import the paraxBg library into the document.

<script src="./parax-bg.js" type=module></script>

2. Import the necessary stylesheet.

<link rel=stylesheet href="./parax-bg.css" />

3. Add the parax-bg-stage attribute to the container and insert backgrounds (images or any content) into a DIV container with the parax-bg attribute.

<div parax-bg-stage>
  <div parax-bg style="background-image: url(bg.jpg); background-position:50% 100%"></div>
</div>

4. Determine the scrolling speed using the --parax-bg-speed variable.

<div parax-bg-stage>
  <div parax-bg style="--parax-bg-speed:2" style="background-image: url(bg.jpg); background-position:50% 100%"></div>
</div>
<div parax-bg-stage>
  <div parax-bg style="--parax-bg-speed:.5">
    Any Parallax Content
  </div>
</div>

5. Restrict the parallax scrolling effect in a specific container.

<div parax-bg style="background-image:url(bg.jpg)" style="--parax-bg-speed:.7">
  <div parax-bg-visible>
    Reachable Part
  </div>
</div>