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
3k
Confessions of an Apprehensive Technical Director
mattfordham
11
320
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
Lambda(Python)の リファクタリングが好きなんです
komakichi
5
270
Cloudflare Workersで進めるリモートMCP活用
syumai
5
520
読書シェア会 vol.4 『ダイナミックリチーミング 第2版』
kotaro666
0
110
The Nature of Complexity in John Ousterhout’s Philosophy of Software Design
philipschwarz
PRO
0
170
データと事例で振り返るDevin導入の"リアル" / The Realities of Devin Reflected in Data and Case Studies
rkaga
2
1.6k
The Missing Link in Angular’s Signal Story: Resource API and httpResource
manfredsteyer
PRO
0
150
GitHub Copilot for Azureを使い倒したい
ymd65536
1
330
flutter_kaigi_mini_4.pdf
nobu74658
0
150
個人開発の学生アプリが企業譲渡されるまで
akidon0000
2
1.2k
Flutterでllama.cppをつかってローカルLLMを試してみた
sakuraidayo
0
140
設計の本質:コード、システム、そして組織へ / The Essence of Design: To Code, Systems, and Organizations
nrslib
10
3.8k
Rubyの!メソッドをちゃんと理解する
alstrocrack
1
300
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
420
Fireside Chat
paigeccino
37
3.4k
Code Reviewing Like a Champion
maltzj
523
40k
The Invisible Side of Design
smashingmag
299
50k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Navigating Team Friction
lara
185
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
How to Ace a Technical Interview
jacobian
276
23k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
GraphQLとの向き合い方2022年版
quramy
46
14k
How STYLIGHT went responsive
nonsquared
100
5.5k
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