Cover Flow in JavaScript and CSS 3-D

Cover Flow in JavaScript and CSS 3-D

Presented at HTML5 Developer Conference Autumn 2014.

With the support for buttery-smooth GPU-accelerated 3-d effect with CSS, modern browsers allow an implementation of a stunning fluid and dynamic user interface. To ensure that the performance is still at the 60 fps level, certain best practices needs to be followed: fast JavaScript code, usage of requestAnimationFrame, and optimized GPU compositing.

This talk aims to show a step-by-step guide to implement the infamous Cover Flow effect with JavaScript and CSS 3-D. We will start with the basic principle of custom touch-based scrolling technique, the math & physics behind momentum effect, and the use of perspective transformation to build a slick interface. Don’t worry, the final code is barely 200 lines!

0284b8950e0f4a57bcc092d4dbb98d97?s=128

Ariya Hidayat

October 21, 2014
Tweet