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
200
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
300
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
220
Other Decks in Programming
See All in Programming
為你自己學 Python
eddie
0
500
create_tableをしただけなのに〜囚われのuuid編〜
daisukeshinoku
0
330
KMP와 kotlinx.rpc로 서버와 클라이언트 동기화
kwakeuijin
0
270
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
870
Kaigi on Railsに初参加したら、その日にLT登壇が決定した件について
tama50505
0
140
情報漏洩させないための設計
kubotak
5
1.2k
Flatt Security XSS Challenge 解答・解説
flatt_security
0
590
テストコードのガイドライン 〜作成から運用まで〜
riku929hr
6
1.3k
PHPカンファレンス 2024|共創を加速するための若手の技術挑戦
weddingpark
0
120
Итераторы в Go 1.23: зачем они нужны, как использовать, и насколько они быстрые?
lamodatech
0
1.3k
PHPとAPI Platformで作る本格的なWeb APIアプリケーション(入門編) / phpcon 2024 Intro to API Platform
ttskch
0
360
rails newと同時に型を書く
aki19035vc
5
610
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Building Applications with DynamoDB
mza
92
6.1k
We Have a Design System, Now What?
morganepeng
51
7.3k
A designer walks into a library…
pauljervisheath
205
24k
Making Projects Easy
brettharned
116
6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.2k
BBQ
matthewcrist
85
9.4k
The Cult of Friendly URLs
andyhume
78
6.1k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
What's in a price? How to price your products and services
michaelherold
244
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
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