Parallax scrolling is a web site trend where the background image stays in place while the foreground content “glides” above it as you scroll. Here is an example from the current version of our public website:
After you scroll down a bit, the text will have moved up, but the background image stays in place, creating an illusion of depth:
How do to that in YWD
We have implemented a new stylesheet class specifically for that. It may sound complicated, but it isn’t: all you need to do is type the word parallax in the Advanced options of the content block where you have the background image:
Which dimensions to use?
It depends. Because the parallax image is responsive, it should be big enough to cover a typical laptop screen and with a similar resolution so it doesn’t look too “stretched”. In our case we used an image that is 1440x776 but you will probably need to go through some tryal & error before you get the best results. If you make it too big it’ll slow down the page download (and SEO) and may even not look good, because the centre of the image may fall in an odd place within your specific page layout.
As always, make sure you optimize your image. Export pho for the Web. Export photos e.g. landscapes as .jpg, and line art like the one in our example as a .png
How about mobile?
Because of performance issues, mobile support for parallax is either very limited or nonexistent. So the effect will only be visible on computers and tablets.