• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
2008-07-12 / WCAN 2008 Summer Ligntning Talks #2
 

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

on

  • 3,440 views

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

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

Statistics

Views

Total Views
3,440
Views on SlideShare
3,439
Embed Views
1

Actions

Likes
1
Downloads
4
Comments
0

1 Embed 1

http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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