How to add Parallax Effects to Images

Questions
1

I wish to add a Parallax Effect to an image so that it appears as though the contents of the image are moving upwards whilst the user scrolls down.

How do I do this?

2

Hey,

can you send me one example, some website that has this effect?

3

Something similar to this please: https://codepen.io/gusevdigital/pen/MWZKyom

I’ve tried to do it with the Tilt and Locomotive Scroll plugins but haven’t had any success.

4

I started working on a plugin for this simple effect, its almost done, we will publish it tomorrow.

4 Likes
5

Hey, a bit late, been busy with other stuff, sorry. But here it is.

We created two plugins that you can combine for best experience.

  • Lenis Smooth Scroll
  • Image Parallax - Scroll Effect

At this moment, they are not published yet, they will live tomorrow probably (or maybe tonight), and you will able to use them. Check video below on how you can make parallax image effect.

One thing I forgot to mention in video: Your image needs to wrapped in a div

2 Likes
6

I am waiting for it too :kissing_heart:

8

Hi @Pakic

Can the new plugins: Parallax Image - Scroll Effect, Lenis Smooth Scroll be installed with other plugins like Simple Scroll Animations, Locomotive Scroll?

Maybe is a good idea to put a note about plugins integrations with other plugins inside of the plugins notes

All the best

9

I am not sure about Lenis, Parallax image will not impact anything else. Maybe you can be the first one to experiment that. :slight_smile:

I am 99% sure that Simple Scroll Animation will work together with Lenis, but since Locomotive Scroll includes its own Smooth Scroll, it might have conflict with Lenis.

10

Thanks

I am happy and excited to be the first to try your new plugins.

And I am already doing the testing before I configure new plugins on my website.