Integrate Simpleparallax.js

Hey Guys,

can somebody help to integrate simpleparallax.js?

I tryed it like it is discribed on their homepage, but it didn’t work.

For example the parallax.js what is mentioned here in the forum works fine.

Thanks

Andre

1 Like

Hi,

Works perfectly for me for basic images, but you have to adapt a bit for backgrounds because it requires img tags (which is a better practice, anyway, since image backgrounds are not responsive and have no alt text), so it can be messy with absolute images and overlays.

What is your issue more precisely?

It need not be messy if you make the content overlayed on top of the image vs making the image’s position absolute.

I wrote a tutorial with details in my new site but am not allowed to share the links here in this forum.

Well it is a solution but I prefer absolute images because then it is the content that sets the height of the section and not image height. No need to use manual height or ratio, and no need to overlay the content.

There are actually different ways to handle each use cases and the best one really depends on the context.

In the end it’s not so messy, but it took time to figure it out :wink:
I just put the image in a an absolute container (with an additional absolute div overlay or not after the image), and a custom CSS rule to absolute the div created by SimpleParallax, and it works well.
(I don’t use the native Bricks image overlay because you can’t (yet?) tweak mix-blend-mode or opacity directly.)

1 Like

Hello Sridhar and Yankiara,

thank you for your reply.

I get the following error:
Uncaught ReferenceError: simpleParallax is not defined

I made some screentshot what i have done so far.


insert class → thumbnail


Script Code from the simpleparallax site


Insert simpleparallax.js in footer scripts

Can somebody help? Would be very nice :blush:

i got it! :see_no_evil: :grin:
greetings

I think there is a problem with 1.3.7… with 1.4beta it work.

How did you solve it? I can’t get mine to work.

First you need Bricks 1.4.

Then put following scripts in Body Footer Scripts in the bricks settings:

And here you can see how it looks like on the site, you have to give the image the same class name like in body (footer) scripts (in my case “para”):

2 Likes

Cool! Got it working! :smiley: Now I just have to figure out how I can add text/containers inside the images. Or do you know if/how I can apply the effect to container background?

Hi,
I tried to get it work in 1.8.x , but nothing happens :thinking:

Does it still work the way you figured out?

ok, finally got it - it works :slight_smile: