Lightweigt Background Parallax JavaScript Library – Ukiyo.js

Category: Animation , Javascript | June 25, 2023
Author:yitengjun
Views Total:213 views
Official Page:Go to website
Last Update:June 25, 2023
License:MIT

Preview:

Lightweigt Background Parallax JavaScript Library – Ukiyo.js

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.9 (06/25/2023)

  • fix misalignment of animation timing in Safari

v4.0.8 (05/29/2023)

  • bugfix

v4.0.6 (05/24/2023)

  • update TypeScript to support optional settings

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

You Might Be Interested In:


Leave a Reply