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

  • 2,361 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,361
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
4
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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