How to add a cool parallax effect to your images with Ukiyo.js

Ukiyo will add a nice parallax effect on our images, with just one line of Javascript.

Here is how it works with these two images. The first one without any effect. The second one with the parallax effect. In order to do a vertical parallax effect, the image need to be scaled a little bit and wrapped in an extra Div.
No worries, Ukiyo will take care of everything so we don't have to do...anything!

supamike_cute_scary_tv_program_game_vector_flat_rainbow_colors_8c1aa238-5c1d-4c7b-974f-6cfdac349db1
supamike_cute_scary_tv_program_game_vector_flat_rainbow_colors_8c1aa238-5c1d-4c7b-974f-6cfdac349db1

Step 1

Install the library. You can use a Snippet Manager - which is often the most convenient way - or you can also put everything in a Code Block.

<script src="https://cdn.jsdelivr.net/npm/ukiyojs@4.0.4/dist/ukiyo.min.js"></script>

Step 2

Add the .ukiyo class to your image element

Step 3

In a Code Block, add this Javascript (we must target the img tag)

new Ukiyo(".ukiyo img");

That's it, there's literally nothing else to do. This is what it looks like in our Code Block:

ukiyo-breakdance-codeblock

Parallax on the Gallery element

We can also target the images from the gallery element.

To do so, once again add the .ukiyo class to your gallery element, and add this Javascript:

new Ukiyo(".bde-gallery.ukiyo img");

Then set the duration to 0.

This is important because the images from the gallery element already have a transition duration set by default, so we need to set it to 0.

breakdance-gallery-duration-option

More options

Some options are available so we can easily change the scaling and the speed effect.
We can even use the Data Attributes to individually change the options of some images.

More info in the official github : https://github.com/yitengjun/ukiyo-js

new Ukiyo(".bde-gallery.ukiyo img", {
scale: 1.5, // 1~2 is recommended
speed: 1.5, // 1~2 is recommended
willChange: true, // This may not be valid in all cases
wrapperClass: "ukiyo-wrapper",
externalRAF: false
})