Parallax Scrolling Backgrounds In Pure JavaScript – paraxBg

Category: Animation , Javascript | November 26, 2020
Author:nuxodin
Views Total:389 views
Official Page:Go to website
Last Update:November 26, 2020
License:MIT

Preview:

Parallax Scrolling Backgrounds In Pure JavaScript – paraxBg

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>

You Might Be Interested In:


Leave a Reply