Author: | yitengjun |
---|---|
Views Total: | 213 views |
Official Page: | Go to website |
Last Update: | June 25, 2023 |
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> <!-- 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()