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!

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.

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)

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

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:

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.

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