Recently, I came across an interesting layout technique on Apple's website that involves two columns with different lengths. As you scroll down the page, one column slows down to align with the other so that they both meet at the bottom.
You can check out this effect on Apple's macOS High Sierra Preview.
I attempted to recreate this layout using JavaScript and CSS on JSFiddle here. The columns behave as expected, stopping scrolling when their bottoms match.
$(window).scroll(function() {
var marginvariant = $(window).scrollTop() * (($('#left').height() / $('#right').height()) * 0.16);
marginvariant = Math.round(marginvariant);
var $left = $('#left');
var leftbottom = $('#left').height() - $left.position().top - marginvariant;
var $right = $('#right');
var rightbottom = $('#right').height() - $right.position().top;
var bottomdif = leftbottom - rightbottom;
if (bottomdif >= 0) {
$('#left').css('margin-top', -marginvariant);
}
});
However, I am facing a challenge in initiating the parallax effect only when the columns reach the top of the page, rather than immediately upon scrolling. I have experimented with various solutions to detect this but encountered issues with object offsets. Additionally, I aim to dynamically calculate the multiplier for smoother right column scrolling based on page and column heights to ensure they align perfectly at the end.