This project was relatively quick to write but, like the Blurry Loading Page project, took me a little while to really figure out.
The effect is pretty straightforward. There are five divs on the page, and on loading they're positioned (via the CSS translateX function) just out of view of the viewport. (400% to be precise).
When the user scrolls, JavaScript kicks in and adds a class to each div to cause it to become visible, in this case by sliding in from either the left or the right. The alternating left and right effect is achieved by using a pseudoselector of nth-of-type to target even/odd elements.
All of that I was able to wrap my head around fairly easily. What slowed me down was the method by which the JS knew 'when' to add the visible class to the divs based on the scrolling.
The JavaScript here uses a method called getBoundingClientRect() to check the coordinates of the top of each div vis a vis a variable called triggerBottom that's based on the calculated height of the viewport. When the top of the div (which, recall, is positioned off-screen) passes this point, the .show class is added and the CSS transform property causes the div to slide in from the right or left. The divs disappear using the same method, just in reverse.
It's a fun effect and pretty impressive for the amount of coding involved.