Applying a Paralax scrolling effect, part 1 and part 2

I finally found a bit of time to write a tutorial and even created a video for it. Please have a look at part 1; part 2 will follow within the next day.

The link is https://spark.adobe.com/video/0VTzZPVCJJP1f , with thanks to Adobe :smiley:

PS: I have a terrible voice, hence no voice-over.

3 Likes

Looks great Ben! You described it very well, so having no voice over is not a problem in that case.

You might want to post it on YouTube as well :slight_smile:

Thank you @George. I will post it to YouTube when I have finalised the second part. Is there any particular area where it should be posted? Or should I post it under my name.

Both parts have been uploaded to YouTube.

Part 1: https://youtu.be/iEI6GYkFIjg
Part 2: https://youtu.be/kWdr_MVzVDA

1 Like

Brilliant @ben
As a database man my front end coding is not brilliant, even bootstrap is still a bit of a black art to me.
I have been working on a clients website and needed to do exactly what you demonstrated.
I was enthralled throughout.
Well done and bring on more!!!

Thanks Ben! You can also post them on our YouTube channel if you want.
https://www.youtube.com/wapplerio

You might also consider writing such guides more as in depth articles. Specially when you are dealing with code (css/html) and more in depth explanations, an article as a better form than video.

You can write them in our medium publication at:

This is ace, thank you

Thank you Ben for sharing this.

Somehow this is not a very “visual” way to achieve parallax, I feel that Wappler being a so called “Visual builder”, it should integrate this feature as an option in the design panel just as with many other visual builders, which is the case with FlexiLayout, for example it let you chose if a particular Div will have a parallax background.
flexilayout-parallax

1 Like

Hi @ben, nice job.

I just skimmed through the videos so I’m not sure if you mentioned it, but it should be noted that using:

background-attachment: fixed;

Will result in this parallax approach not working on various mobile devices since many have it disabled due too performance reasons. So if mobile compatibility is desired by users they would need to use a different approach.

2 Likes