Hi everyone,

I have been testing the parallax effect for background image for two weeks now and I can't do that.
Who can take a look at my project because it doesn't want to do what it has to do.
That is the website where I follow the steps because to get started but nothing works here
Can someone help me on my way here so that I still have that parallax effect.
I don't see any background images and no parallax effect.
What goes wrong here in the design of my project
My project attached. I have already tried everything but no results

Kind regards
Stephane

You need to have a wrapping container outside the parallax window with some kind of content to make the page scroll at all.
You need to reference the parallax.js in the 'footer js' box of the wrapper container
You need one more attribute: 'Data Z index: 1'

That should be it.

Inger,

I don't really understand what to do.
I understand that you need a wrapper container and nested in my parallax container is what you mean.
Can you give an example, don't understand so well.

You are the expert Inger.
I really appreciate that you have always helped me and I still do.

What do you think about the implementation of Tailwindcss because it has a lot of classes and you can create additional ones?

Kind regards
Stephane

Check this one out. And compare with what I wrote in my previous post, then you will understand it better. You can see a similar one here: https://mock-up.coffeecup.com/f-comps/f … allax.html . It has been built with Foundation, but it is done in exactly the same way in Bootstrap.

And one more thing: When you open the file I sent, you won't see the image. Don't think there is something wrong, it is just that stuff you add in the boxes on the new Element pane won't be visible until you preview. Just like it always was with HTML elements.

I don't know tailwind css, therefore I have no opinion about it.

Sorry you don't need any other containers just go with what you have but change things a bitto but in,

Stephane

All you need to do is
1/ remove the JS script source from the containers footer

add the following code to the footer in the footer section in site manager (the code you had was not pointing to the image file

<script>
$('.parallax-window').parallax({imageSrc: './images/parallax-bg.jpg'});
</script>

also in the footer section in page manager add the link to the JS file parallax.js


When you have done that the footer section in the page manager should look like this

<script src="./js/parallax.js"></script>
<script>
$('.parallax-window').parallax({imageSrc: './images/parallax-bg.jpg'});
</script>

all you need do then is to give the body some height 300vh just for testing purposes

here is a short video showing it working with the settings and links as shown above
https://youtu.be/qoGO4rMPnjU

If you still cannot I will make a video showing how to do it

Here is your project file with the changes

Wayan, we set out with different source files. For my approach, the one with the attributes, I still maintain the need for a wrapper around the rest.
But your way is a good one too.
However, if we try to make a component of either your solution or mine, they will both fail. - BUT, I have found a workaround for mine!

Hi Inger
I didn't even bother bothered looking at the one with the attributes
I figured just the one way was needed

I also don't do components as you know, so not really bothered if it can't be made as a component either

One could always save the page as a theme if one wanted to make a new project with that parallax effect
and save the component as a symbol if one wanted to have that parallax effect on another page or pages then just change the path to another image

here is a video thingy for having that component on a new project, with two pages, second page with 2 components on same page different images

https://youtu.be/Zr3m4uwpd_Y