The rest is js to animate the positoin of the white line using transform:translate.
If we colour the outer container red you can see how the white line is animated from outside the red box (overflow:hidden hides the white line) until it meets the bottom of the red box and then continues until it disappears through the bottom of the red box.
I’m not around for most of the day otherwise I would have played around with it although my js skills are limited.
The basics of what you need are a container that is 50 vh tall with overflow:hidden. Inside that container you have a 1px container with white background that is 100% of the parent tall (e.g. the same height). You start with the white line transformed out the top of the container so it is invisible.
When the window scrolls and the red box is at xx% of the viewport you start animating the white line from top to bottom using translate as mentioned until it disappears out the bottom of the red box. (Obviously vice versa when you scroll up).
Hopefully that is some help:)
If I get a chance later I will set up the css for the boxes and then you can investigate adding js on scroll etc.
Thanks for taking the time to explain this. I understand how it works now.
I have a question, though. This may be dumb but when the white line is out of the container and the user keeps on scrolling, where does the white line go? Does it keep on moving down as the user scrolls down?
If you look in dev tools it seems that the line just keeps getting animated with the scroll position. It is of no importance because the ‘red’ container is overflow:hidden. As the red container comes back into the viewport then so will the white line as it is constantly animated in line with the scroll position.
At least that’s my take on it. I suppose the line could have been stopped animating once it was outside the red box but then I guess you have to re-check when it has re-entered that area. At the moment it does’t seem to need to know where the box is located as it is just continually transformed up and down but only becomes visible once inside the red box.
Hmmm, I’m wondering of perhaps a similar effect could be achieved using a fixed background image of a white line instead. Have to rush out soon but hopefully you can make a start.
Hi, @PaulOB! Thank you so much for this.
You are helping me a lot.
I tried this on Firefox and Edge but the white line doesn’t seem to move in those browsers.
Not really sure why. This is the first “real” website I’m working on so this is also the first time I’m checking my work on different browsers.
Yes the problem in Firefox is that the transform property kills the ‘fixed attachment’ as it creates a stacking context when it shouldn’t (some say this is not a bug but a behaviour but it really is an unwanted behaviour and a pain in the neck).
Edge had a different bug with not liking a 1px width (probably dues to rounding error in Edge) so the width needs to be greater than 1px for the line holder element.
i.e Remove the transform from the following rule and set the width to 3px instead of 80px.
height:calc(50vh + 60px);
width: 3px;/* greater than 1px for edge bug*/
margin: -30px auto;
background:url(images/whitebgline.gif) no-repeat fixed 50%;
/*transform:translateX(50%); remove as creates stacking context for fixed positioned image*/
That should fix it.
However I notice that edge scrolls very badly with the fixed positioned element attached to the :after element so I have removed it and applied it to the body as per normal but included a script snippet for touch devices that re-instates the :after element. (Note that the squarespace link you showed in your first post suffers badly in Edge with jumping when scrolling with the mousewheel although this may be device/mousewheel specific also)).
IOS does not work with fixed attachments and background-size:cover which is why they need a separate fixed element and normal background-attachment to work.
Note also I have just set the white line on touch devices to be of fixed height as they won’t scroll it properly anyway.
IE11 doesn’t work with the js arrow functions so I have removed them.
There may be other bugs as this is just a proof of concept but I have update the link and the codepen which should work in IE11, Edge, Chrome & Firefox now.