Cover Flow in JavaScript and CSS 3-D

Slide 1

Slide 1 text

Cover Flow in JavaScript and CSS 3-D @ariyahidayat Oct 21, 2014 #HTML5DevConf

Slide 2

Slide 2 text

Steve Jobs, 2007

Slide 3

Slide 3 text

Newton’s laws of motion

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Optimized JavaScript requestAnimationFrame Event throttling

Slide 6

Slide 6 text

ariya.github.io/kinetic #kineticscrolling https://speakerdeck.com/ariya

Slide 7

Slide 7 text

Drag-and-Scroll 1

Slide 8

Slide 8 text

http://ariya.github.io/kinetic/1/

Slide 9

Slide 9 text

Text “Clipped” via overflow:hidden http://ariya.ofilabs.com/2013/08/javascript-kinetic-scrolling-part-1.html 80 lines of JavaScript Illusion of scrolling

Slide 10

Slide 10 text

No Native Browser Scrolling view = document.getElementById('view'); if (typeof window.ontouchstart !== 'undefined') { view.addEventListener('touchstart', tap); view.addEventListener('touchmove', drag); view.addEventListener('touchend', release); } view.addEventListener('mousedown', tap); view.addEventListener('mousemove', drag); view.addEventListener('mouseup', release); Intercept mouse events Intercept touch events

Slide 11

Slide 11 text

Steady Pressed Scrolling touchstart touchend touchmove touchend

Slide 12

Slide 12 text

Tap vs Release function tap(e) { pressed = true; reference = ypos(e); e.preventDefault(); e.stopPropagation(); return false; } function release(e) { pressed = false; e.preventDefault(); e.stopPropagation(); return false; }

Slide 13

Slide 13 text

Drag: Delta + CSS Transform if (pressed) { y = ypos(e); delta = reference - y; reference = y; scroll(offset + delta); } function scroll(y) { offset = (y > max) ? max : (y < min) ? min : y; view.style[xform] = 'translateY(' + (-offset) + 'px)'; }

Slide 14

Slide 14 text

Scroll Threshold delta = reference - y; if (delta > 2 || delta < -2) { reference = y; scroll(offset + delta); }

Slide 15

Slide 15 text

User taps the screen pressed = true (touch) reference = 20 (view) offset = 100 User drags 7 px up (touch) y = 13 (touch) delta = 7 (view) offset = 107 translate the document by 7 px User releases finger pressed = false

Slide 16

Slide 16 text

Drag-and-Scroll Technique Intercept browser events Track position + apply CSS transform Illusion of scrolling

Slide 17

Slide 17 text

Kinetic F/X 2

Slide 18

Slide 18 text

http://ariya.github.io/kinetic/2/ Momentum Effect Flick List Kinetic Scrolling

Slide 19

Slide 19 text

http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html Automatic scrolling Manual scrolling 120 lines of JavaScript

Slide 20

Slide 20 text

Steady touchstart Pressed Manual Scrolling Automatic Scrolling touchend timer tick touchmove touchend and zero speed touchend and positive speed timer tick decelerate to zero speed touchstart

Slide 21

Slide 21 text

Tap Drag Release (Quick) Move Release Flick Gesture

Slide 22

Slide 22 text

Manual Scrolling Automatic Scrolling Track touch position Scroll the view Compute the “launch” velocity Scroll the view Reduce the velocity

Slide 23

Slide 23 text

Continuous Velocity Tracking function tap(e) { pressed = true; reference = ypos(e); velocity = amplitude = 0; frame = offset; timestamp = Date.now(); clearInterval(ticker); ticker = setInterval(track, 100); e.preventDefault(); e.stopPropagation(); return false; } Call track() 10 times/second Rate throttling

Slide 24

Slide 24 text

Velocity = Change of Position function track() { var now, elapsed, delta, v; now = Date.now(); elapsed = now - timestamp; timestamp = now; delta = offset - frame; frame = offset; v = 1000 * delta / (1 + elapsed); velocity = 0.8 * v + 0.2 * velocity; } instantaneous velocity ~ 100 ms optional filter

Slide 25

Slide 25 text

Automatic Scrolling Exponential decay time scroll offset

Slide 26

Slide 26 text

Slow Down, a.k.a. Deceleration time velocity

Slide 27

Slide 27 text

Stopped Decelerating

Slide 28

Slide 28 text

Time Constant velocity reduced by 63%

Slide 29

Slide 29 text

Scroll offset at a given time Final scroll offset Amplitude (how far the final scroll offset is) Time constant

Slide 30

Slide 30 text

amplitude = 0.7 * velocity; target = offset + amplitude; requestAnimationFrame(autoScroll); Setup for Automatic Scrolling

Slide 31

Slide 31 text

function autoScroll() { var elapsed = Date.now() - timestamp; scroll(target - amplitude * Math.exp(-elapsed / timeConstant)); requestAnimationFrame(autoScroll); } Continuous Automatic Scrolling

Slide 32

Slide 32 text

6 × time constant The list will stop after 1.95 seconds

Slide 33

Slide 33 text

The flick (=launch velocity) determines how far the list will stop It does not impact when the list will stop scrolling 1 2

Slide 34

Slide 34 text

Kinetic Scrolling Unmasked Intercept browser events Track position + velocity Kinetic F/X Auto scroll with exponential decay

Slide 35

Slide 35 text

Snap-to-Grid 3

Slide 36

Slide 36 text

http://ariya.github.io/kinetic/3/ List items Target position

Slide 37

Slide 37 text

Date Picker The scrolling can’t stop halfway

Slide 38

Slide 38 text

Adjustment of Final Position http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-3.html Possible choices

Slide 39

Slide 39 text

As Simple As... function autoScroll() { var elapsed = Date.now() - timestamp; scroll(target - amplitude * Math.exp(-elapsed / timeConstant)); target = Math.round(target / snap) * snap; requestAnimationFrame(autoScroll); }

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Swipe with Parallax 4

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

http://ariya.github.io/kinetic/4/

Slide 45

Slide 45 text

Different Distance, Different Speed http://ariya.ofilabs.com/2013/12/javascript-kinetic-scrolling-part-4.html

Slide 46

Slide 46 text

function scroll(offset) { var slow = Math.round(offset / 2); var fast = Math.round(offset); ... } snap = screen width

Slide 47

Slide 47 text

Cover Flow 5

Slide 48

Slide 48 text

CSS with GPU Compositing http://ariya.ofilabs.com/2013/06/optimizing-css3-for-gpu-compositing.html

Slide 49

Slide 49 text

http://ariya.github.io/kinetic/5/

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

200 lines of JavaScript http://ariya.ofilabs.com/2014/01/javascript-kinetic-scrolling-part-5-cover-flow-effect.html No transformation translateX(-110px) translateZ(-150px) rotateY(60deg) translateX(110px) translateZ(-150px) rotateY(-60deg)

Slide 52

Slide 52 text

translateX(-110px) translateX(-110px) translateZ(-150px) translateX(-110px) translateZ(-150px) rotateY(60deg) Perspective 3-D