Lightweigt Background Parallax JavaScript Library – Ukiyo.js

Preview:

Description:

Ukiyo.js is a lightweight, configurable, fresh new parallax library that makes creating stunning background parallax scrolling effects a breeze.

Supports <img> <picture> tags and DIV containers with background images.

See It In Action:

How to use it:

1. Install and import the Ukiyo.js.

# Yarn
$ yarn add ukiyojs
# NPM
$ npm i ukiyojs

import Ukiyo from "ukiyojs";

2. Or directly load the compiled JavaScript in the document.

<script src="./dist/ukiyo.min.js"></script>

3. Initialize the Ukiyo.js and apply the parallax effect to the target elements:

const parallaxEle = document.querySelector('.ukiyo');
new Ukiyo(parallaxEle)

<!-- Image -->
<img class="ukiyo" src="parallax.jpg" alt="Parallax Image" />

<!-- Picture Element -->
<picture>
  <source srcset="parallax.webp" type="image/webp">
  <img class="ukiyo" src="parallax.jpg">
<picture>

<!-- DIV Container With A Background -->
<div class="ukiyo"></div>

4. Available options to config the parallax effect.

new BgParallax(parallaxEle, {
    // scaling factor
    scale: 1.5,
    // animation speed
    speed: 1.5,
    // apply will-change: transform to the parallax element
    willChange: true, 
    // class name of the wrapper
    wrapperClass: "ukiyo-wrapper"
})

5. You can also pass the options via HTML data attributes as follows:

<img
  data-u-scale="1.5"
  data-u-speed="1.5"
  data-u-wrapper-class="ukiyo-wrapper"
  data-u-willchange
>

Changelog:

v3.0.3 (08/11/2022)

• Bugfix: border-radius not working

v3.0.2 (06/14/2022)

• fix CSS Grid bug

v3.0.1 (05/08/2022)

• Fixed: resize event listeners to be removed on destroy()

v3.0.0 (04/06/2022)

• Module bundler has changed from webpack to Rollup

v2.0.2 (02/18/2022)

• fixed a bug in reset() method

v2.0.1 (01/15/2022)

• improved behaviour of margin-auto

v2.0.0 (12/27/2021)

• removed support for IE

v1.0.5 (12/25/2021)

• Change image loading to img.decode()