Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frame Animation in the Browser
Search
mattfordham
August 15, 2012
Programming
2
210
Frame Animation in the Browser
Presented at Seattle ID
mattfordham
August 15, 2012
Tweet
Share
More Decks by mattfordham
See All by mattfordham
Styleguide Driven Development
mattfordham
13
3.1k
Confessions of an Apprehensive Technical Director
mattfordham
11
340
Automating EE Bootstrapping and Deployment
mattfordham
3
180
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
Serena MCPのすすめ
wadakatu
4
830
AIエージェント時代における TypeScriptスキーマ駆動開発の新たな役割
bicstone
4
1.2k
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
1
230
Playwrightはどのようにクロスブラウザをサポートしているのか
yotahada3
7
2.2k
プログラミングどうやる? ~テスト駆動開発から学ぶ達人の型~
a_okui
0
190
株式会社 Sun terras カンパニーデック
sunterras
0
170
パフォーマンスチューニングで Web 技術を深掘り直す
progfay
18
4.8k
Reactをクライアントで使わない
yusukebe
7
6.3k
Web技術を最大限活用してRAW画像を現像する / Developing RAW Images on the Web
ssssota
2
1.1k
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
kobakei
0
440
Let's Write a Train Tracking Algorithm
twocentstudios
0
220
TokyoR#119 bignners session2 Visualization
kotatyamtema
0
130
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Building Adaptive Systems
keathley
43
2.8k
A Tale of Four Properties
chriscoyier
160
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Speed Design
sergeychernyshev
32
1.1k
A better future with KSS
kneath
239
17k
How to Ace a Technical Interview
jacobian
280
23k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Site-Speed That Sticks
csswizardry
11
870
The Pragmatic Product Professional
lauravandoore
36
6.9k
Designing for Performance
lara
610
69k
Transcript
Frame Animation in the Browser Seattle Interactive Developers / August
15, 2012
Matt Fordham Technical Director / WINTR www.wintr.com
None
Animated GIFs Multi-image Sequences Sprite Sequences
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Consider for... Looping animations Small details Low-tech contexts
(HTML emails) Make ‘em with... Photoshop
Multi-image Sequences Cons Lots of image requests Lots of DOM
elements Pros Any image type Good for larger images
Multi-image Sequences Consider for... Larger/longer animations Multi-stage animations Make ‘em
with... After Effects / 3D / Photoshop Javascript
Sprite Sequences Cons Not great for large images Pros Only
one image request Only one DOM element
Sprite Sequences Consider for... Smaller/shorter animations Button rollovers Make ‘em
with... After Effects / 3D / Photoshop Javascript
jquery.frameSequencer.js https://github.com/mattfordham/Frame-Sequencer
Other Useful Tools https://github.com/jakesgordon/sprite-factory http://imageoptim.com http://www.codingmammoth.com/quickscale.php http://manytricks.com/namemangler
Thanks :) @mattfordham www.wintr.com www.matthewfordham.com/blog