Need help to create parallex effect section in bubble

[karanjot001]

Hello , I am facing issue when creating the parallax effect in the bubble. Is it possible to create sections in parallax effect when scrolling page down. Can any one guide me how I can achieve this. Thanks

[nomorecode]

Parent page > background image > check apply parallax (desktop only) > then nest your groups over the top

[karanjot001]

Thanks . I need 1 more help. I am creating the menu and when i scroll the page down the menu background should change to white and text black and stick on the top. how we can do this , should have to add any conditions ?.

[rukevweb]

Yes. You could use Current page scrolling position > 30 (or any number) as a condition, then add which parameters you want to change for each element in the header. Hope that helps

[nomorecode]

@rukevweb is right, both your header (container > group) and text needs to have the correct conditions set > a good rule of thumb is to set current page scrolling position the exact same height as your header, that way the transition is smooth all on devices with no loss of pixels.

[karanjot001]

I add the group and add picture in the group But not able to see the parallax option .

[nomorecode]

Set para on parent page > NOT group

[karanjot001]

@nomorecode

t para on parent page

Thanks , Now it works. I has 3 sections where I am using the parallax effect with 3 different images. How can I add 3 images at one time

[nomorecode]

that reqs code mate

[nomorecode]

Settings > expose IDs

Create a new group and call the group ID #parallax_1 > do the exact same for your next 2 groups but name them #parallax_2 and #parallax_3

Add a small HTML element to anywhere on your page and copy/paste the following code into it.

Then upload you’re 3 bg images and set the path of each image in #parallax_1, 2 and 3 below. The one caveat is that you need to set a height unless you know -flex.

<style>
#parallax_1 {
  background-image: url("your_img.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parallax_2 {
  background-image: url("your_img.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#parallax_3 {
  background-image: url("your_img.jpg");
  height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>

[karanjot001]

I will try This code, If I face any issue I will come back to you. Thanks

[karanjot001]

@nomorecode Hello , I add the html code and group with id you said , but not able to see the image in frond

[nomorecode]

Go to your settings and tick the box (below)

Then add parallax_1 in the groups ID (below)

**Make sure you also upload your para images to your server and add them in the html

[karanjot001]

@nomorecode

parallax_1

Thanks its works.

[nomorecode]

You’re welcome

[karanjot001]

@nomorecode , Hello , I am here again . I need one more help.

when I scroll the page, the content box comes from bottom to top in animation .can you help me out with this one. Thanks

[nomorecode]

Sure > there are a few ways > best way would be > hide your group with text > workflow > do when cond is true (set to always) > animate group which contains your text with big slide in or something > when page fold is X.

[karanjot001]

I have 1 more query.

( I want that my first group section stretch to the screen on any device ) . I attached the image , It will clear easily.