web + wow

cj gammon — creative technologist — adobe systems

web + wow

use left/right/spacebar to navigate

esc for menu

@cjgammon

caniuse.com

a website is..

• article, marketing, store, profile, portal, feed, art, game, etc...

Semantics
&
graphics

immersive experiences

circa 2007

HTML5

quick hits

visual web tech

CSS

Hi.

Hi.

SVG

2d canvas

webgl

EFFECTS, MOTION & GAMES

Graphic Effects

Filters

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)

MASKS

CSS MASKING

mask: url(mask.png) center;

DYNAMIC MASKS

non-standard solution

getCSSCanvasContext('2d', 'canvasID'); mask: -webkit-canvas(canvasID);

CUPCAKES!

link coming soon

Motion Graphics

Motion Graphics

OK GO - WTF

Motion Graphics

Ricardo Ferreira

video games

3D Gaming

3D parallax

Layering

• 
• 
• 

3d transforms

Camera

communication

web rtc

GRATUITOUSLY FRAGILE DEMO

(not currently available)

THE FUTURE??

html.adobe.com

THANKS!

@cjgammon

Extra Resources & Reading

Shane Mielke Interview

Button Concepts By Bartek Drozdz

Case Study: Google I/O 2013 Experiment By Thomas Reynolds

USING WEBGL TO ADD 3D EFFECTS TO YOUR WEBSITE By GUILLAUME LECOLLINET

Woedend! experimentorium

threejs.org

Animate Your Way to Glory By Steven Wittens

CSS Canvas Drawing

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.