Applying parallax to elements inside a bloc

I Need Help
1

Hi dear community,

can someone tell me, if there is an easy way to apply parallax effect not to a whole bloc, but to a selected element inside that bloc, i.e. on div container or even a row?

I am asking, because I need the bloc to be full width (because of background color) but the parallax effect to stay inside bootstrap grid.

Thanks a lot in advance!

Maxim

2

you can use a multi bloc structure bloc to do this. For example, if you place a structure group 3 bloc onto the page, you can apply a different background image to each of the 3 blocs. Each background can be made parallax if required.

1 Like
3

Hey @Maxim

You can make your own Parallax class. In my example, I am making one class that handles the Parallax, it has some things not in the Class Manager yet, so I am putting it in the page header.
Then you can make another class that just has the background image.
The advantage of this is you can add as many of these as you want really easily and it mostly uses the same code.

STEP 1

Add this code to the page header

<style>
.myparallax {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: auto 100%;	
}
</style>

STEP 2

Set up custom class in the class manager and add a background image.

Step 3

Add both classes to the column or div etc. You may find you need to set the height of an element.

3 Likes
4

Hi Hendon, thanks a lot for your reply!

I probably was not clear enough - I have to apply it inside the blocs existing structure, not creating new bloc grid…

5

Hey @PeteSharp, this seems to be exactly what I wanted! Thanks a ton for your help!

6

Something I shared by in 2017. Awesome Parallax Effects!

1 Like
7

@KBConcepts Thanks a lot! I’ll definitely take a look. :+1:

8

Let us know how you get on.

9

@apswoodwork Sure thing!