This project was an excuse to experiment with CSS 3D tools, the Gyroscope API, and creative scrolling techniques. CSS variables keep track of distance, object positioning, and dynamic camera-like movement. ES6 is used to keep track of mouse movement and mobile gyro changes. A completely different version of the page is rendered for IE.
https://github.com/edwinb24/edb24-pwa-theme/blob/main/assets/preprocess/scripts/3d_scrolling.js
- CSS HOUDINI
- CSS3
- ES6
- HTML5
- PHP