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>
<!-- Video -->
<video class="ukiyo" src="1.mp4" type="...">

4. Available options to config the parallax effect.

new Ukiyo(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",
    // allows the parallax animation to be run within an external requestAnimationFrame()
    externalRAF: false,
})

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:

v4.0.4 (03/16/2023)

• add types

v4.0.3 (03/15/2023)

• change output format

v4.0.2 (03/09/2023)

• Bugfix: Bootstrap sizing/height bug

v4.0.1 (03/08/2023)

• Bugfix: Bootstrap sizing/height bug

v4.0.0 (12/30/2022)

• Rewritten the code from JavaScript to TypeScript
• Added the externalRAF option, which allows the parallax animation to be run within an external requestAnimationFrame()
• Changed the image loading to img.decode()
• Fixed a bug where the border-radius of parallax elements was not being applied on Mobile Safari
• Improved the smoothness of parallax animations on Mobile Safari

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()