Author: | yitengjun |
---|---|
Views Total: | 4 views |
Official Page: | Go to website |
Last Update: | June 14, 2022 |
License: | MIT |
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.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()