Works

カバーフロー

CSS3 translate / transition で動くカバーフローっぽいスライダー ●github https://github.com/ahomegane/lib/tree/master/cpt/slider

  • 2032
  • 3

tile

masonryを使う機会が増えそうなので、自分で一度実装してみました。 http://jsdo.it/norahiko/e3Zi 参考にさせていただきました。 ・transitionとjqueryのアニメーション分岐 ・左上/右上固定 ・画面リサイズ対応 ●オプション { elements: frame.find('> li'), margin: { right: 10, bottom: 10 }, offset: { top: 0, left: 0 }, animation: true, initAnimation: true, ease: 'ease',// linear/ease/ease-in/ease-out/ease-in-out duration: 200, delay: 0, intervalInit: 0, resize: true, intervalResize: 0, initCallback: null, origin: 'left-top' } ●github https://github.com/ahomegane/lib/tree/master/cpt/tile

  • 2149
  • 2

SVGで文字を書く

●環境 Chromeとsafari(windowsはNG)のみ ●memo ・firefoxは、  stroke-dashoffsetをanimationすると想定通りに動かないため、表現不能 ・modernizrを使用しても、svgアニメーションの正確な機能テストはできなかった。

  • 2072
  • 1

Ascii Art Listening to Music

forked: 第三回全国統一 HTML5実技コンテスト エントリー用コード ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー 画像をもとに、音に合わせて動くアスキーアートを生成します。 ▼操作 ・'Play Music':音楽再生→アスキーアートが動く ・'Add Image':ローカルの画像アップ(ボタンを押さなくてもエリアにドロップするだけでもアップできます)  ※画像が大きい場合はフルスクリーンでお願いします! 音楽を流しながら、 ポイポイ画像をドロップして、 画像を切り替えていくとちょっと楽しいかも。 ▼環境 ・Google Chrome (Winだと音への反応が少し不安定かも)

  • 4656
  • 6

Skills

Hot tags

Categories

HTML / CSS / JavaScript