2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

2,655 views

Published on

透過PNGをアニメーションさせる小話.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,655
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

2008-07-12 / WCAN 2008 Summer Ligntning Talks #2

  1. 2. 業務のための JavaScript 勉強法? 岩田 享 LLP メガネラボ [email_address]
  2. 3. アジェンダ <ul><li>自己紹介 </li></ul><ul><li>本題 </li></ul><ul><li>サンプル </li></ul><ul><li>まとめ </li></ul>
  3. 4. 自己紹介
  4. 5. 自己紹介 <ul><li>岩田 享 / issm 【いわた】 </li></ul><ul><li>LLP メガネラボ </li></ul><ul><li>Perl とか JavaScript とか </li></ul><ul><li>http://blog.iwa-ya.net/ </li></ul>
  5. 6. 本題
  6. 7. 本題 業務のための JavaScript 勉強法?
  7. 8. 本題 わかりません ><
  8. 9. 本題 ... ということで個人的見解
  9. 10. 本題 JavaScript HTML+DOM CSS
  10. 11. サンプル
  11. 12. サンプル アニメーション PNG (透過) のようなものを作ってみる
  12. 13. サンプル <ul><li>HTML を記述 </li></ul><div id=&quot;anim”></div>
  13. 14. サンプル <ul><li>連結画像を準備 </li></ul>#anim { overflow: hidden; background-image: url(animation.png); ... }
  14. 15. サンプル .frame-0 { background-position: 0 0; } .frame-1 { background-position: 0 ...px; } .frame-2 { background-position: 0 ...px; } . . . <ul><li>各フレームに対応するクラスを定義 </li></ul>
  15. 16. サンプル <ul><li>JavaScript を記述 </li></ul>var anim = document.getElementById('anim') , frame = 0 ; // 200 ミリ秒ごとに frame-1, frame-2, ... // と,クラス名が切り替わっていく setInterval( function() { frame++; anim.className = 'frame-' + frame; ... }, 200 );
  16. 17. サンプル デモ
  17. 18. サンプル
  18. 19. まとめ
  19. 20. まとめ <ul><li>紛らわしいタイトルをお詫びします </li></ul><ul><li>JavaScript もいいけど HTML+DOM , CSS もね </li></ul><ul><li>画像を準備する方が苦労した </li></ul><ul><li>http://blog.iwa-ya.net/2008/07/11/064937 </li></ul>
  20. 21. もうひとつ ...
  21. 22. もうひとつ ... http://www.nicograph.jp/
  22. 23. もうひとつ ... http://www.54t.org/
  23. 24. よろしければ
  24. 25. ご静聴ありがとうございました

×