0
 
業務のための JavaScript 勉強法? 岩田 享 LLP  メガネラボ [email_address]
アジェンダ <ul><li>自己紹介 </li></ul><ul><li>本題 </li></ul><ul><li>サンプル </li></ul><ul><li>まとめ </li></ul>
自己紹介
自己紹介 <ul><li>岩田 享  / issm 【いわた】 </li></ul><ul><li>LLP  メガネラボ </li></ul><ul><li>Perl  とか  JavaScript  とか </li></ul><ul><li>...
本題
本題 業務のための JavaScript 勉強法?
本題 わかりません  ><
本題 ... ということで個人的見解
本題 JavaScript HTML+DOM CSS
サンプル
サンプル アニメーション PNG (透過) のようなものを作ってみる
サンプル <ul><li>HTML を記述 </li></ul><div id=&quot;anim”></div>
サンプル <ul><li>連結画像を準備 </li></ul>#anim { overflow: hidden; background-image: url(animation.png); ... }
サンプル .frame-0 { background-position: 0 0; } .frame-1 { background-position: 0 ...px; } .frame-2 { background-position: 0 ....
サンプル <ul><li>JavaScript を記述 </li></ul>var anim  = document.getElementById('anim') , frame = 0 ; // 200 ミリ秒ごとに  frame-1, fr...
サンプル デモ
サンプル
まとめ
まとめ <ul><li>紛らわしいタイトルをお詫びします </li></ul><ul><li>JavaScript もいいけど   HTML+DOM , CSS もね </li></ul><ul><li>画像を準備する方が苦労した </li><...
もうひとつ ...
もうひとつ ... http://www.nicograph.jp/
もうひとつ ... http://www.54t.org/
よろしければ
ご静聴ありがとうございました
 
Upcoming SlideShare
Loading in...5
×

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

2,412

Published on

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

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

No Downloads
Views
Total Views
2,412
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "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. ご静聴ありがとうございました
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×