### Installation
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Instructions on how to install Ukiyo.js using npm, yarn, or pnpm, and how to import it.
```APIDOC
## Installation
Install `ukiyojs` using your package manager of choice.
```sh
# npm
npm install ukiyojs
# yarn
yarn add ukiyojs
# pnpm
pnpm add ukiyojs
```
Import Ukiyo:
```javascript
import Ukiyo from "ukiyojs";
```
or import via CDN:
```html
```
```
--------------------------------
### Install Ukiyo.js
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Install the package using npm, yarn, or pnpm.
```shell
# npm
npm install ukiyojs
# yarn
yarn add ukiyojs
# pnpm
pnpm add ukiyojs
```
--------------------------------
### Full Page Parallax Example
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
A comprehensive example demonstrating multiple parallax sections with different configurations and smooth scroll integration, including image and CSS background parallax.
```html
Ukiyo.js Full Page Parallax
Welcome
```
--------------------------------
### Usage - HTML Structure
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Examples of how to structure your HTML for Ukiyo.js parallax effects with different element types.
```APIDOC
## Usage - HTML
Give the elements cool names like *ukiyo* to call them in scripts for parallax effects.
- #### 🏞 ``__
```html
```
- 🎬 __``__
```html
```
- 🖼️ CSS `background-image`
```html
```
```
--------------------------------
### Using External requestAnimationFrame
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Guide on how to use an external requestAnimationFrame for Ukiyo.js animations.
```APIDOC
## Using external requestAnimationFrame
By default, parallax animation is automatically rendered using the library's `requestAnimationFrame`, but you can use an external `requestAnimationFrame` to run the animation.
```javascript
const parallax = new Ukiyo(".ukiyo", {
externalRAF: true
})
function raf(time) {
// animate parallax
parallax.animate()
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
```
Enable the `externalRAF` option, and then call the `animate()` method within your custom `requestAnimationFrame` to trigger the parallax animation.
```
--------------------------------
### HTML Element Setup
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Add the 'ukiyo' class to your HTML elements. Ukiyo.js supports images, picture elements, videos, and elements with CSS background-image.
```APIDOC
## HTML Element Setup
### Description
Add the parallax class to your HTML elements. Ukiyo.js supports images, picture elements, videos, and elements with CSS background-image.
### Method
None
### Endpoint
None
### Parameters
None
### Request Example
```html
```
### Response
None
```
--------------------------------
### Initialize Ukiyo.js Parallax
Source: https://github.com/yitengjun/ukiyo-js/blob/main/tests/demo/index.html
Initializes Ukiyo.js parallax on elements with the class 'ukiyo'. This is the basic setup for enabling parallax effects.
```javascript
const parallax = new Ukiyo('.ukiyo');
```
--------------------------------
### Setup HTML Elements for Parallax
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Apply the parallax effect to images, picture elements, videos, and CSS background images.
```html
```
--------------------------------
### Instance Options
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Details on the available options for initializing Ukiyo.js instances and their default values.
```APIDOC
## Options - Instance Options
```javascript
const parallax = document.querySelector('.image')
new Ukiyo(parallax, {
scale: 1.5, // 1~2 is recommended
speed: 1.5, // 1~2 is recommended
willChange: true,
wrapperClass: "ukiyo-wrapper",
externalRAF: false
})
```
| Option | Type | Default | Description |
| - | - | - | - |
| `scale` | `number` | `1.5` | Parallax image scaling factor. |
| `speed` | `number` | `1.5` | Parallax speed. |
| `willChange` | `boolean` | `false` | When true is specified, the elements will receive will-change: transform when Parallax is active. |
| `wrapperClass` | `string` | `null` | Set any class name to the automatically generated wrapper element. |
| `externalRAF` | `boolean` | `false` | Set it to true if you want to use an external requestAnimationFrame. |
```
--------------------------------
### Usage - JavaScript Initialization
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Demonstrates how to initialize Ukiyo.js with CSS selectors, DOM nodes, or HTMLCollections.
```APIDOC
## Usage - JavaScript
Instantiate Ukiyo with the cool name you gave to the element as the first argument. The element selection supports the following types:
```javascript
// CSS selector
new Ukiyo(".ukiyo")
// or node
const images = document.querySelectorAll(".ukiyo")
new Ukiyo(images)
// or HTMLCollection
const images = document.getElementsByClassName('ukiyo');
new Ukiyo(images);
```
There you go, all set! Now let's see it in action.
```
--------------------------------
### Initialize Ukiyo.js and Lenis
Source: https://github.com/yitengjun/ukiyo-js/blob/main/docs/index.html
Configures Ukiyo.js with external RAF and sets up Lenis for smooth scrolling, synchronized via a single animation frame loop.
```javascript
/** * Ukiyo.js */ const parallax = new Ukiyo('.ukiyo', { externalRAF: true, }); /** * smooth scroll */ const lenis = new Lenis({ duration: 0.75, smoothWheel: true, smoothTouch: false, }); /** * animate */ function raf(time) { parallax.animate(); lenis.raf(time); requestAnimationFrame(raf); } requestAnimationFrame(raf);
```
--------------------------------
### Instantiate Ukiyo
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Initialize Ukiyo using CSS selectors, nodes, or HTMLCollections.
```javascript
// CSS selector
new Ukiyo(".ukiyo")
// or node
const images = document.querySelectorAll(".ukiyo")
new Ukiyo(images)
// or HTMLCollection
const images = document.getElementsByClassName('ukiyo');
new Ukiyo(images);
```
--------------------------------
### Import Ukiyo.js
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Import the library into your project or include it via CDN.
```javascript
import Ukiyo from "ukiyojs";
```
```html
```
--------------------------------
### Constructor: new Ukiyo(elements, options)
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Initializes a new Ukiyo parallax instance. You can pass a CSS selector, HTMLElement, NodeList, or HTMLCollection as the first argument, along with optional configuration options.
```APIDOC
## Constructor: new Ukiyo(elements, options)
### Description
Creates a new Ukiyo parallax instance by passing a CSS selector, HTMLElement, NodeList, or HTMLCollection as the first argument, with optional configuration options.
### Parameters
#### Path Parameters
None
#### Query Parameters
None
#### Request Body
None
### Request Example
```javascript
import Ukiyo from "ukiyojs";
// Using CSS selector
const parallax = new Ukiyo(".ukiyo");
// Using querySelectorAll
const images = document.querySelectorAll(".parallax-image");
const parallax = new Ukiyo(images);
// Using getElementsByClassName
const elements = document.getElementsByClassName("parallax");
const parallax = new Ukiyo(elements);
// Using a single element
const element = document.querySelector(".hero-image");
const parallax = new Ukiyo(element);
// With full options configuration
const parallax = new Ukiyo(".ukiyo", {
scale: 1.5, // Parallax image scaling factor (default: 1.5, recommended: 1~2)
speed: 1.5, // Parallax animation speed (default: 1.5, recommended: 1~2)
willChange: true, // Enable CSS will-change: transform for better performance (default: false)
wrapperClass: "ukiyo-wrapper", // Custom class for the auto-generated wrapper element
externalRAF: false // Set true to use external requestAnimationFrame (default: false)
});
```
### Response
#### Success Response (200)
None
#### Response Example
None
```
--------------------------------
### Initialize Ukiyo Instance
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Create a new parallax instance using various selector types or full configuration options.
```javascript
import Ukiyo from "ukiyojs";
// Using CSS selector
const parallax = new Ukiyo(".ukiyo");
// Using querySelectorAll
const images = document.querySelectorAll(".parallax-image");
const parallax = new Ukiyo(images);
// Using getElementsByClassName
const elements = document.getElementsByClassName("parallax");
const parallax = new Ukiyo(elements);
// Using a single element
const element = document.querySelector(".hero-image");
const parallax = new Ukiyo(element);
// With full options configuration
const parallax = new Ukiyo(".ukiyo", {
scale: 1.5, // Parallax image scaling factor (default: 1.5, recommended: 1~2)
speed: 1.5, // Parallax animation speed (default: 1.5, recommended: 1~2)
willChange: true, // Enable CSS will-change: transform for better performance (default: false)
wrapperClass: "ukiyo-wrapper", // Custom class for the auto-generated wrapper element
externalRAF: false // Set true to use external requestAnimationFrame (default: false)
});
```
--------------------------------
### Include Ukiyo.js via CDN
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Directly include the library in your HTML file using a script tag.
```html
```
--------------------------------
### Methods - destroy()
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
How to use the `destroy()` method to remove the Ukiyo.js instance.
```APIDOC
## Methods - `destroy()`
Destroy instance:
```javascript
const instance = new Ukiyo(".image")
instance.destroy()
```
```
--------------------------------
### Configure Instance Options
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
Customize parallax behavior by passing an options object during instantiation.
```javascript
const parallax = document.querySelector('.image')
new Ukiyo(parallax, {
scale: 1.5, // 1~2 is recommended
speed: 1.5, // 1~2 is recommended
willChange: true,
wrapperClass: "ukiyo-wrapper",
externalRAF: false
})
```
--------------------------------
### Methods - reset()
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
How to use the `reset()` method to recalculate element sizes and positions.
```APIDOC
## Methods - `reset()`
To reset the instance and recalculate the size and position of the elements, use the following code:
```javascript
const instance = new Ukiyo(".image")
instance.reset()
```
```
--------------------------------
### Element Attributes for Options
Source: https://github.com/yitengjun/ukiyo-js/blob/main/README.md
How to set Ukiyo.js options individually for elements using data attributes.
```APIDOC
## Options - Element Attributes
Additionally, you can individually set these options for elements using the `data-u-*` attribute, like this:
```html
```
```html
```
```html
```
--------------------------------
### Data Attributes: Per-Element Configuration
Source: https://context7.com/yitengjun/ukiyo-js/llms.txt
Override instance options on individual elements using `data-u-*` attributes for fine-grained control over each parallax element.
```APIDOC
## Data Attributes: Per-Element Configuration
### Description
Override instance options on individual elements using `data-u-*` attributes for fine-grained control over each parallax element.
### Method
None
### Endpoint
None
### Parameters
None
### Request Example
```html
```
- 🌅 __`