Any idea how to replicate this? Parallax FX

I Need Help
1

https://www.liveareacx.com

I’d like to know how / if it is possible to make a website like this in blocs.
I can replicate the background images easily, by using full screen background images set to Parallax (checkbox).
What I can’t replicate is the text staying in place. On blocs I don’t know how to set the text (or anything other than the background) to parallax.
I don’t necessarily need the text to have any motion like the example website has. (which I think can be achieved with the Scroll FX options in blocs).

Thanks in advance!
~ N

1 Like
2

Hi Nathan @ndd

Seems fairly easy.

Just recreated the first 3 blocs of the site in the attached bloc file:

LiveArea.zip (711.1 KB)

MDS

1 Like
3

that’s good. but the difficult part is the fixed text :slight_smile:

1 Like
5

Well actually did not initially understand the fixed text issue - currently working on the solution - stay tuned…

MDS

6

Hi Nathan and Ralf @ndd @RME

Finally managed to get it right. May not be as smooth as the original but the best I could do so far.

LiveArea 2.zip (766.7 KB)

MDS

7 Likes
7

@MDS it’s so cool how you are here for us :grinning:

2 Likes
8

Thank you for doing this - I didn’t realize it was going to require adding code. Secretly I was hoping there was a way to do it without additional code.
I am seeing what you mean how it isn’t smooth. In Safari it looks like it is staying in place, but as you scroll up/down the page it looks like it is bouncing super quickly (in the direction you are scrolling). When I shut off the Sticky Navigation it seems like it is working a little better, less of the bouncing is happening as a result.
Thanks again for all this, super nice of you!

9

You’re welcome.

MDS

1 Like
10

You’re absolutely right.

1 Like
11

@Bootsie @KBConcepts

Thank you both for your kind comments. :smiley:

MDS

1 Like
12

Hello MDS,
I did try to use the example you did (LiveArea2)… if I do open your original Blocs file it works but as soon I do one from scratch, there is no way to fix the text.
I’m really not getting the trick… would appreciate if you could give me a suggestion.
Thanks :wink:

13

Hi @andrea.biasutti

Have you added the code which is located in the the Page Settings: Header & Footer ?

Header:

Screenshot 2020-04-03 at 18.16.04
Screenshot 2020-04-03 at 18.16.042544×1634 424 KB

Footer:

Screenshot 2020-04-03 at 18.16.13
Screenshot 2020-04-03 at 18.16.132544×1634 329 KB

As mentioned at the time it was created, it not that smooth in Safari while Chrome and Firefox seem okay.

Perhaps Pete @PeteSharp or @Pealco who have quite helpful on this forum may further assist.

MDS

2 Likes
14

Thank you very much for your help… now it works!
About the smoothness, I did change in .contenu the position from absolute to relative and it seem a little better. Of course if there is a better way to do this I would welcome it :wink: