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
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
330
Hi, have you met Kotlin Multiplatform? | DevFest Vienna 2024
prof18
0
200
Modern Functional Fluent CFML REST by Luis Majano
ortus24
0
150
Beyond Laravel Octane - Hyperf for Laravel Artisans
albertcht
1
200
rtcamp 10 (vk-illuminati)
yumcyawiz
0
170
個人開発で使ってるやつを紹介する回
yohfee
1
720
書籍『LangChainとLangGraphによるRAG・AIエージェント[実践]入門』の紹介
os1ma
2
110
Serverless renderování Webových komponent
rarous
PRO
0
130
Modern Angular with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
130
現場から考えるソフトウェアエンジニアリングの価値と実験
nomuson
1
140
色んなオートローダーを覗き見る #phpcon_okinawa
o0h
PRO
5
420
4年間変わらなかった YOUTRUSTのアーキテクチャ
daiki1003
2
660
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Web development in the modern age
philhawksworth
205
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
The Invisible Customer
myddelton
119
13k
Building Your Own Lightsaber
phodgson
102
6k
How GitHub Uses GitHub to Build GitHub
holman
473
290k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Making Projects Easy
brettharned
115
5.9k
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