Works

CSS3 Prefix Generator

For those who hate CSS3 vendor prefixes :( Paste or drag & drop a css file onto upper textarea then press button to generate fully-prefixed css data. vendor-prefix付けるのめんどい。。。!! 似たようなサービスはすでにいくつかあるみたいですが、自分用に作ってみました。 CSSファイル全体 でも 一部分※でも可。 ドラッグ&ドロップにも対応しています。 (※プロパティ:値;のセットのみ対応。プロパティのみは不可)

  • 83065
  • 8

jsdo.it子ちゃん花火

Thanks to @GeckoTang 画伯 クリックでも花火でます。 座標データは以下のツールで生成できます! http://jsdo.it/tsmallfield/fireworksgenerator

  • 33580
  • 9

Level0 Throttle Sample

コールバック関数の実行回数を間引くてすと @see http://level0.kayac.com/#!2012/07/post_115.php

  • 101071
  • 22

Curve Practice

Drag / Double click =)

  • 5559
  • 29

Stars 2

Typographyシリーズ第2弾。 文字画像をトレースしてパス情報を求めようとあれこれしています。 オレオレアルゴリズムのため難しい漢字とか苦手かも。。。 How it works : http://jsrun.it/tsmallfield/stars2?debug Stars #1 : http://jsdo.it/tsmallfield/stars

  • 14852
  • 72

THE花火職人 / Fireworks Generator

【HTML5花火大会(http://jsdo.it/event/html5hanabi)非公式ツール】 ドラッグ&ドロップされた画像を2値化(白黒化)し、黒いピクセルのx,y座標の配列を生成します。 なお座標の数値は花火の中心からの割合(-100~100%)となっています。 (例:半径200pxの花火にする場合は生成されたデータのx,y座標それぞれに200をかけて100で割ってください) ---------- 調節可能パラメータ ---------- ・2値化の際のしきい値(0x00~0xFF) ・配列のサイズ(0~100%) ------------------------------------------------ ■DEMO (Thanks to @sugyan) http://jsrun.it/tsmallfield/fireworksgenerator?demo ■やらない花(こちらのコードがForkしやすい! Thanks to @GeckoTang) http://jsdo.it/GeckoTang/yDfb 不具合・ご要望などありましたら@tsmallfieldまで!

  • 21043
  • 22

DATA URI Playground2 (jsdo.itエディタ対応DATA-URI生成)

As you may know already, very long lines (e.g. DATA URI) in jsdo.it editor somehow prevent it from highlighting codes. To solve this problem, i've added a new feature of inserting an (escaped) newline after every arbitrary number(50, by default) of characters to generated/pasted DATA URIs. (Note that you have to use quotaion marks for css background-image on webkit browsers.) ------------------------------ jsdo.itのエディタはDATA URIのように長い文字列を1行に入れてしまうとコードハイライトが利かなくなるようなので、 生成(orコピペ)したDATA URIを任意文字数ごとに改行する機能を追加しました。 (※webkitでCSS背景画像を指定する際は改行したDATA-URIを引用符で囲まないとだめみたいです。) (js,cssでは改行したDATA URI使えるがhtmlではだめ??)

  • 40560
  • 34

JSQuiz

The score is added when the following condition is met: eval(question) === eval(your answer) So, for example, the answer for "typeof 1" is ' "number"', not 'number'. If you think the answer is runtime error, click the [Error] button, and then click [Answer] button. Each code is evaluated in an iframe created for every question and its answer. ------------------------------------------------------------ 次の条件が満たされた場合正解となりスコアが加算されます: eval(問題) === eval(あなたの解答) 例えば、"typeof 1"という問題の正解はnumberではなく"number"となります。 解答が実行エラーでは?という時は入力欄の右側にある[Error]ボタンを押し[Answer]ボタンをクリックしてください。 なお、コードは問題ごとに生成されるiframeで実行されます。 (自分ではなかなかいい問題が思いつかないので、そこはForkに期待…です!)

  • 52260
  • 34

Stars

いろいろと力ずくですが。。。 (私の環境では) Windows の Safari もしくは Mac でみるとアンチエイリアスが効いてきれいです。 Better viewed on Mac or Safari for Windows, thanks to anti-aliasing :) BTW: Generated images are under public domain, so do anything u want with them. How it works: http://jsrun.it/tsmallfield/stars?debug Inspired from: http://jsdo.it/kyo_ago/zPGx

  • 7241
  • 21

JS Prompt

JS Prompt is an application where you can edit/run JavaScript codes on-the-fly. The original version is a bookmarklet I made for my personal use. Fullscreen view is definitely recommended! ---------------------------------------------------------------------- ちょっとしたコードをさくっと書いて試めせるJS Prompt オブジェクトの列挙や外部JSの読込・実行に加え、File API対応ブラウザではDrag&Dropによるローカルjsファイル読込も可能。 なお、入力したコードはShift+Enterで実行できます! こんなサイト↓↓を見るときに使える…かも。 http://perfectionkills.com/javascript-quiz/ 全画面表示でどうぞ!

  • 5365
  • 6

CSS3でマウス追尾/Mouse Following Arrow

Webkit Only Inspired from: http://jsdo.it/calmbooks/hoverGradient

  • 5798
  • 19

CSS3でスピードメーター

Webkit Only, as always :) マウスの横方向の移動速度を表示。 (値はかなり怪しいですが、加速度0の場合は近い。。。はず) こっちで値検証中↓ http://jsdo.it/tsmallfield/debug_css3_speed_meter

  • 4980
  • 8

餌あげられるようにしてみた。forked from: Pure CSS Goldfish

Webkit only, as always :) Click to feed the fish, and click again to reset. クリックで餌をあげられます!もう一度クリックでリセット。 How it works: http://jsdo.it/tsmallfield/spoiler_css3goldfish

  • 5738
  • 16

canvasでミニチュア写真メーカー

This is a drag&drop-based app where you can make a photo look like a miniature. (It'll take some time in processing, so just be patient!) --------------------------------------- 某タ●ヤ模型パッケージ風ミニチュア写真メーカー ネタで作ってみました。 画像処理まわり、特にHSV⇔RGBのあたりはまだちゃんと理解できていないので怪しいです。 ドラッグ&ドロップ対応なのでローカルのファイルでいろいろ試してみてください! (※処理に若干時間がかかるかもしれません。)

  • 15988
  • 26

QuickBenchmark

QuickBenchmark provides a method of graphically comparing the performance of pieces of JavaScript code, including DOM manipulation. ---------------------------------------- ベンチマーク結果をグラフで比較できるアプリ。テストコードはそれぞれ別のiframe上で実行されるためDOM操作の比較も可能です。 ライブラリ読み込み機能は後日...? 全画面推奨です / Fullscreen view is DEFINITELY recommended!

  • 11573
  • 16

CSS3で秒数カウント/Count-up Timer

Webkit Only

  • 18386
  • 44

まだ眠れないあなたに…/Still Can't Sleep?

Drag/double-click :) ドラッグ/ダブルクリック! Chrome/Safari推奨 MAXまで頑張ると…????

  • 4197
  • 13

眠れないあなたに…/Can't Sleep?

Acrostic-Markup practice. Drag/double-click the sheep =) あいうえおマークアップの練習。 羊をドラッグ/ダブルクリック! Inspired from: http://jsdo.it/Tenderfeel/5GA2

  • 6509
  • 12

ScrollBar Practice

should work on iPhone/iPad...

  • 3803
  • 6

Lazy Loader Practice

てすと

  • 2364
  • 3

曲線をIteratorで描く

y = x * x; みたいな曲線をイテレータっぽく var curve = new Curve("x * x").from(0).delta(1).to(100); curve.next();// => { x : 0, y : 0 }; curve.next();// => { x : 1, y : 1 }; curve.next();// => { x : 2, y : 4 }; にみたいに書けると楽かなと思って実験。 アニメーション用とかに。

  • 5122
  • 5

てれび

@see http://code.google.com/apis/youtube/2.0/reference.html @see http://www.youtube.com/user/kayacMovie ※音が出るので注意してください ※型が古いので画面の端が少し見切れます

  • 4552
  • 10

CSS3 Driven Slideshow

A sample of CSS3 driven, js-free slideshow utilizing :target pseudo class and transitions. Try on Webkit or brand-new Firefox 4!

  • 3048
  • 8

Light Reflection Practice #1

光の反射を表現するテスト。 仕組みはシンプルで 描画コンテキストの globalCompositeOperation を 'source-atop' にして 上から予め用意しておいたハイライトの画像を描画しているだけ。 描画するx座標を x軸の回転角に応じて変化させればそれっぽく見えます。 その仕組がわかりやすいようにしたものが以下です。 http://jsdo.it/tsmallfield/l2q6 CodePen にもあげてみました。 http://codepen.io/tsmallfield/details/qtDfg Again, this is from my recent mockups i've been working on. Realizing a light reflection without math or physics. Scroll to see how real it looks. Here's how it works: http://jsdo.it/tsmallfield/l2q6 I also submitted to CodePen: http://codepen.io/tsmallfield/details/qtDfg

  • 3618
  • 8

Hex Pattern Practice #1

Here's one of my mockups for some project i've been working on. Please scroll down to see what happens. i think this may be more effective when changing one picture to another. You can see the sample here: http://jsdo.it/tsmallfield/6W0p2 スクロール量に応じた画像の切り替え演出検討用モックアップ。 ■2枚の写真の切り替えに応用した例はこちら http://jsdo.it/tsmallfield/6W0p2

  • 2779
  • 8

Simple skeletal animation

ブログ用サンプルコード http://tsmallfield.hateblo.jp/entry/2014/01/02/232755 An example of simple skeletal animation @see godzilla.jp CodePen: http://codepen.io/tsmallfield/details/FJkof

  • 2934
  • 8

SVG ant

ブログ用のサンプルコードです。 http://tsmallfield.hateblo.jp/entry/2014/01/20/215953 svg の stroke-dashoffset を動的に変更しています。

  • 3506
  • 15

Skills

  • Photoshop
  • Flash
  • Illustrator
  • jQuery
  • HTML5
  • XHTML
  • CSS
  • CSS3
  • JavaScript
  • SCSS
  • ActionScript

Hot tags

Categories

HTML / CSS / JavaScript