UKIYO ⛰— for modern parallax scrolling

for modern parallax scrolling.

Minimally

and boldly,

without

any waste.

(01) scale
(02) speed
(03) get started

ukiyo-js is a new library that reconstructs parallax and achieves smoother animations through a simple design.

01

deeper

and closer.

Ukiyo-e, despite its flatness, achieves stunning depth through skillful use of perspective. Similarly, parallax background images on a website create an interactive and three-dimensional visual experience.

It's like looking out of a window — the scenery placed within the frame comes alive and starts to move.

the depth of the

scenery.

The speed of parallax can be finely tuned by combining it with the scale setting.

03

Seeing is believing. So, let's get started and install using the following steps.

(3)

usage

                    <img class="ukiyo" src="image.jpg">

                    Customize it to your liking.

                    new Ukiyo(".ukiyo")

                    <picture>
  <source srcset="~">
  <img class="ukiyo" src="image.jpg">
<picture>

                    Customize it to your liking.

                    new Ukiyo(".ukiyo")

                    <video class="ukiyo" src="~" type="~">

                    video {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

                    new Ukiyo(".ukiyo")

                    <div class="ukiyo"></div>

                    .ukiyo {
  background-image: url(~);
  background-size: cover;
  background-position: center;
}

                    new Ukiyo(".ukiyo")

options (5)

options

type

default

description

scale: number; 1.5; Parallax image scaling factor.
speed: number; 1.5; Parallax speed.
willChange: boolean; false; If true, the element will be given a will-change: transform when Parallax is active.
wrapperClass: string; null; Class name of the automatically generated wrapper element.
externalRAF: boolean; false; Use external requestAnimationFrame.