The idea behind Squarespace's implementation is that the user will be on a device and browser that is running well enough that the delay is not perceived.
So inherently the offset is always "catching up". The offset amount is based on how much the page has scrolled (past tense), so of course that amount can't be calculated (and then acted-upon) until It's worth mentioning that this isn't so much an issue with Squarespace, but the nature of Javascript scroll events and page rendering. So, we must get a bit more complex, adding a background-gradient to the pseudo-element. Imperceptible, there is still tearing between the first section and the navigation bar (white), and between the last section and the footer (navy blue). Now, let's look a little more closely, however. The colors were selected by sampling a color from the applicable portion of each image and the index-page section IDs are assigned by Squarespace based on the "URL slug" within the page settings for each page. They would need to be changed on a per-site basis.
) are specific to the example site you provided. Of course, the "tearing" is still occurring, but we're filling what was a white gap (very perceptible) with a color that approximates the colors of the image (so that it is less easily perceived). The following CSS, inserted via the Squarespace CSS Editor will make the "tearing" nearly imperceptible between sections However, it can still work adequately in your situation, where images are butted-up against one-another (and where the color across the top/bottom of an image is relatively consistent across the width of the image). This works better in situations where each section with a background image alternates with a section with flat background color. The work-around for this white space gap "tearing" between Squarespace parallax index page sections is to create an element "behind" the image in each section, then fill that element with a color (or gradient) that is similar to that which is seen in the transition area between the two sections. I can't really capture the white spaces I'm getting since they appear while scrolling and go away when I stop.
I've included an example of the flickering I'm getting on the parallax sections of my site (the 1px black line through the image) below.
#Squarespace remove parallax menu for certain pages code
I don't know if it's necessary to supply my custom code or not, but I can revise this post to include some if people think it's necessary. Thanks in advance for any help! And sorry if this isn't really the right place to ask. If I remove the flexbox part of my code, the white spaces above and below the parallax image is a little bit better, but the problems still persist. I've tried removing my custom code, changing the height of the parallax sections, and changing the width of my browser to fix it, but nothing seems to work to stop the jitter and flickering. I'm able to use basic CSS and HTML to make something look the way I want, but I'm fairly inexperienced and don't know where to begin with something like fixing the parallax of a Squarespace site and hope someone can point me in the right direction (or tell me that it's hopeless, which is fine too).
0 kommentar(er)
