[Javascript] Grade.js – 画像から最適なグラデーション背景を生成してくれるJS
1枚の画像から、その画像に合ったグラデーション背景を生成してくれるJSライブラリ。画像内に含まれる色情報の中から、多く使われている2色を抽出してグラデーションにしているようです。この手法最近Apple製アプリケーションでよく見ますよね。iTunesでアルバムを選択している時のヘッダ色とか。Webでもこの手法が使えるというのはナイスですな。
Tag Archives: Javascript
[Web Design] Scrollanim – スクロール芸のJSライブラリ
スクロールイベントをきっかけに、何かしらの動きとともにコンテンツが出現する、いわゆるスクロール芸を行うJSライブラリ。配布ページ自体がデモページになっていて、スクロールすると色々動きます。ライブラリはCSS3とJSからできているようで、サイズが9kbと軽いのが特徴。導入も適用したい要素に属性を追加するだけのようなので、簡単に使えそうです。詳細とソースコードはGithubで公開されています。
[Javascript] Chart.js 2.0 – データから動的にグラフ生成を行うJS
用意したデータから、Web上に動的にグラフ生成を行うJavascript、Chatr.jsの2.0がリリースされていました。2.0になって複数グラフのミックスや、新しいタイプのグラフのサポート、グラフのアニメーションなどが機能追加されたようです。導入やカスタマイズについてはこちらのページから確認することができます。
[Javascript] Unslider, the simplest carousel slider for jQuery – シンプルなjQueryスライダー
シンプルな作りのjQueryスライダー。サイトを見ると導入はかなり簡単で、script行を挿入して、マークアップは1つのスライダー項目を1つのliで囲うというもののようです。この手のスライダーではごく一般的な手法ですね。Methods & Optionsの項目を見ると、シンプルなわりにオプションについては豊富に用意されているようで、カスタマイズもしやすそうな印象。スライダー用のjQueryプラグインって山ほどあるけど、選択肢のひとつとしてなかなか良さそうな感じ。
[Javascript] matchHeight – 横に並んだ複数要素の高さを揃えてくれるjQueryプラグイン
水平方向に並んだ複数要素のHeight（高さ）を揃えてくれるjQueryプラグイン。こちらでデモを確認することができます。ソースダウンロードして挙動を確認してみたんですが、横方向に同じ位置にある要素の内、最も大きいHeightを参照しているようです。かゆところに手が届くとはまさにこの事で、たまーにこうしたいって時あるんですよね。レスポンシブレイアウトにも対応しているようで、使い勝手が良さそうです。
[Misc] PCE.js Mac Plus emulator running Mac OS System 7 – ブラウザ内で動くSystem 7
ブラウザ内で実行できるSystem 7。早い話しが古いMacOSです（昔はSystemなんとか、日本語環境だと漢字Talkと言われてました。懐かしい）。JSで作られているらしく、ホントに動くのが信じられないくらい色々ちゃんと動きます。例えばTeachTextを立ち上げればちゃんとテキスト入力ができるし（日本語は無理っぽい。まぁSystemだから当然か）、MacDrawを立ち上げればちゃんとドローイングが出来ます。About This Macintoshを開けば、メモリーが4MBで動いてる事まで確認できます。いやこれスゴいっすね。これが使えたからって今の時代何も便利になるわけじゃないですが、オールドMacファンにはこのモノクロのインターフェースだけでも十分ハァハァできると思います。ちなみに自分のファーストMacはPowerBook 160cで、漢字Talk 7.1でした。ネットもない時代Mac使って何してたんでしょうね。懐かしいですな。
[Javascript] fullPage.js – 全画面スクローラー
ブラウザウィンドウ全体を1ページ単位にして、画面単位でスクロールできるJS。スクロールホイール回すと全画面単位で切り替わる、最近よく見る形のスクロール方式です。Appleなんかも商品によっては使ってますね。このJavascriptは、縦方向だけでなく横方向にもスクロールできる点が特徴。2ページ目だけ横方向にカルーセルっぽく見せたいという場合に使えます。また各ページはアンカーリンクにも対応しているので、ナビゲーションを使ったスクロールにも使えます。個人的にはPage up / downのキーでもちゃんと操作できる点がナイスでした。
[Web Design] CodeMyUI.com – Web制作に便利なコードスニペットを集めたサイト
Webデザインで使える様々なコードスニペットを集めたサイト。チェックボックス装飾やModalウィンドウ、マウスオーバーアニメーション、イメージスライダー、グリッドレイアウト、CSSボタン、イメージギャラリーなど、色々な場面で使えるコードが紹介されています。各作例はアニメーションGifを使って一覧されているので、動きの確認まで確認できる点がとってもナイスです。