I’m building a site where the client is requesting three parallax rows on the pages of the site (top, middle, and bottom) and I’m having a heck of time figuring out the proper dimensions for the images.
Part of the problem is that both the row and module are set to full width to allow the content to scale as needed. So right off the bat we’ve got a moving target. The site essentially has no proper defined width. There’s also no way to define a height for the rows either - not within PageBuilder, anyway. So I had to manually set the height in CSS. I ended up with 375px.
With all that said, the first image dimensions I tried were 1200px wide x 800px tall. I figured 1200 was a bit wider than my average expected width, and 800 was at least twice as tall as the viewable area. To my surprise, this mostly worked -at least for the middle and bottom rows. The important part of the photo was nearly centered or at least eventually came into frame.
However the parallax up top was mostly out of frame even when I scrolled down. A quick fix for this was to position the viewable portion of the photo at the topmost part of the image, but that seems less than ideal since you end up with an image that’s essentially half photo and half blank. Clearly there must be better way of doing this, right?
I wish I could share a demo, but this is for an R&D company so I’m not allowed to.
