Works

CSSのみで来海えりかちゃんがDance! Dance!

♪Dance! Dance! ハートキャッチ☆

  • 14532
  • 14

kaleidoscope

1.canvasで三角形エリアに文字をランダム20個描画  1.1 canvasで三角形にclip切り抜く  1.2 文字のサイズと色をランダムに決定し描画  1.3 文字サイズ、色、x、yを保存しておく 2.canvas画像をDataURLで出力し24個のimg.srcに 3.24個imgの配置、角度をcssで調整 4.setIntervalで三角形を作り直す  4.1 最初と同じようにcanvasで描画  4.2 最初に描画したときの文字のx、y、色、サイズを用いる  4.3 その際 yだけ+1する  4.4 yが三角形clipエリア外(下)に出るなら新しい文字をclipエリアの外(上)に描画   ※常に20個分の文字の描画位置、色、サイズのデータを保持している  4.5 作り直したcanvasの三角形画像をDataURLで出力し24個のimg.srcに

  • 7910
  • 18

さーくらー ひらーひらー

まいーおりーて おーちてえー cssアニメーションで桜ひらひら. webkit only.

  • 8459
  • 12

あの日見たEDの雰囲気を僕達はまだ再現できない。

「あの花。」EDっぽく。 アニメ「あの花。」のエンディングの花が舞うのをCSSアニメで再現してみたかったのですが…。 サビ突入時のズームアウト+反転再現のためにsetTimeoutだらけです。 全画面にしてスクリーンセイバー的利用(向いてないとは思う)に落下と反転を繰り返す版もあります → http://jsdo.it/piyotori/edGr ※webkit only

  • 6044
  • 3

2d canvas + 3d CSS

(webkit only, Full Screen推奨) disco?っぽい感じで cssで変形配置してさらにぐるぐる回してるcanvasに普通に2d描画してるだけっていう。

  • 1053
  • 4

長方形の画像をディスク盤面にねじ曲げてプリント

長方形の元画像を、CD・レコード盤的なものの表面にねじ曲げてプリントするテスト ねじ曲げはcanvas利用 回転はCSSアニメーション BGM: カレンダーガール(アイカツ!)

  • 659
  • 0

fixed single arrow clock: 針固定で文字盤が回る時計

針が1本固定で、文字盤が回転する時計 1.canvasで文字盤, 針, を作成し4つのimgに出力 (コードのほとんどが文字盤, 針の描画です) 2.各objを毎秒css3 transformで角度調整 なのでcanvas上でのアニメーションではないです -------------------------------------------------- standard

  • 5582
  • 16

canvasで自己組織化マップ

アルゴリズムは見よう見まねなんちゃってです modified: 16x16版切り替えボタンを設置しました さっさと同系色が集まる様子見てみたい場合は16x16でどうぞ

  • 2179
  • 2

Skills

Hot tags

Categories

HTML / CSS / JavaScript