• Ariya Hidayat
  • VP of Engineering Shape Security
  • Twitter

These days, I promote software craftsmanship, JavaScript, HTML5, CSS3, and general web technologies. I write blog posts regularly and speak at developer events from time to time. Currently, I run the engineering team at Shape Security.

Session

  • Cover Flow in JavaScript and CSS 3-D
  • Time: TBD | Room: E-130
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!

Media

Video
Slides
Sponsors