Rich Web Experiences

and the Future of the Web

March 7, 2014 — SXSW INTERACTIVE — Austin, TX., U.S.A.

Hi

I'm CJ Gammon

Creative Technologist @ Adobe

“mixed media leveraging interactivity and the web for an immersive experience”

a brief history of the

rich web

DOCUMENTS

FLASH

Mobile

the technology

html5

caniuse.com

CSS

Hi.

Hi.

clip paths

clip paths

clip-path: ellipse(50%, 50%, 50%, 50%); clip-path: polygon(0 0, 100% 0, 80% 25%, 20% 25%);

masks

masks

mask-image: url(...); mask-position: center; mask-repeat: no-repeat;

blend modes

blend modes

background-image: url(...), url(...); background-blend-mode: multiply, screen; mix-blend-mode: difference;

Filters

filters

filter: saturate(3);

saturate(0.0) contrast(1.0) grayscale(0.0) brightness(1.0) hue-rotate(0deg) blur(0px) sepia(0.0) invert(0.0) opacity(1.0)

SVG

raphaël.js

d3.js

snap.svg

generative art

2d canvas

easel.js

processing.js

pixi.js

& many more..

blend modes

dynamic masks

CSS Canvas Drawing

http://bit.ly/csscanvas

CSS Canvas Drawing

var ctx = document.getCSSCanvasContext(canvas, 'id'); mask: -webkit-canvas(id);

dynamic mask demo

webgl

SHADERS

VERTEX SHADER

FRAGMENT SHADER

three.js

babylon.js

pixi.js

& many more..

Shader Transitions

video

DVD Like
video

FULLSCREEN
VIDEO

OK GO - WTF

video games

sprite sheet

camera

parallax

MYST

semantics

off the grid

webgl + css

communication

webRTC

demo not yet available online

state of the web

a global resource

html.adobe.com

Win 1 year Creative Cloud

http://attendee.adobeevents.com/

or

Give a completed lead card to a representative.

thanks

@cjgammon

http://bit.ly/richweb

resources

Concepts

CSS Canvas Drawing
Food Network Project

SVG Libraries

d3.js
snap.svg
raphael.js

2D Libraries

Easel.js
pixi.js

3D Libraries

three.js
babylon.js

attribution

Looping Videos by BEEPLE VJ CLIPS
Filter Flower Photo by Matt Gammon
Other Photos by CJ Gammon

@CJGAMMON

use space or arrow to navigate

Hi, this site tries to show off some cutting edge features that are not supported in your browser. Maybe try viewing it in chrome.
Thanks.