Web experiment: Parallaxer

While working on a new web design I wanted to create a layout with columns of different sizes where each column moves with a different speed (parallax effect) while scrolling down, so that the columns would line up perfectly at the bottom of the page. I wanted to achieve this without attaching a scroll event where column positions are constantly adjusted via JavaScript but solely in CSS with translate3d().

On the demo page 4 columns are each filled with a random number of squares. All necessary calculations for the CSS 3D transformations are done and applied via JavaScript on page load. It's also possible to add or remove squares thus triggering a recalculation.

Basis for all calculations is the longest column, which stays in front on the z-axis and scrolls with normal speed. All other columns are moved back on the z-axis according to their relative height in respect to the longest column and are scaled back up to their former size using scale(). It is also necessary to correct the perspective offset on the x- and y-axis.

The demo is compatible with all more or less recent versions of #Firefox, #Chrome and #Safari. Unfortunately #InternetExplorer and #Edge are too slow and buggy for complex 3d transformations.

Information in German: https://www.cmcm.info/…/2018-01-…/web-experimente-parallaxer
Demo: https://www.cmcm.info/experiments/parallaxer.html

#web #experiment #css #css3 #transform3d #parallax #scrolling #webdesign #development