Your SlideShare is downloading. ×
0
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,393

Published on

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

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

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

No Downloads
Views
Total Views
2,393
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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.  

×