Resource - JavaScript

WebGLを使って画像にエフェクトを与える為のJavaScriptライブラリ・「glfx.js」

glfx.js glfx.jsはWebGLを使用して画像を編集出来るようにする為のJSライブラリです。セピア加工やチルトシフト、ボケ、ノイズ効果などのエフェクトを与えることが出来ます。WebGLなので対応ブラウザが限られる為、すぐに実...

オープンソースのHTML5製ゲームエンジン・「Kiwi.js」

Kiwi.js Kiwi.jsはオープンソースとして公開されているHTML5製のゲームエンジンです。モバイルでもPCでも動くゲームコンテンツ構築の為に開発された様です。CanvasにもWebGLにも適しており、Cocoon.jsを併用...

llustratorで作成したAIファイルをHTMLにコンバートするスクリプト・「ai2html」

ai2html ai2htmlはAIファイルをHTMLに変換する為のスクリプトです。AIファイル内のオブジェクトを解析、処理してHTMLファイルにコンバートするみたいです。オプション機能としてコンバートの際に任意の拡張子への変更やjP...
Ads

様々なシーンに対応可能なスマフォ対応のコンテンツスライダー・「Swiper」

Swiper Swiperは様々なシーンに対応可能なコンテンツスライダーです。スライダーのネスト化やカルーセル、3Dな遷移エフェクトなどの設定が可能でスマフォでのフリック操作にも対応しています。また、マウスホイール対応、オートプレイ化...

input要素にシンプルなオートコンプリート機能を付加する軽量なスクリプト・「Awesomplete」

Awesomplete Awesompleteはinput要素にオートコンプリート機能を付加する為のJavaScriptです。カスタムデータ属性に候補として出すキーワードを設定する、という仕様なので使用するシーンは限られそうですが、そ...

HighCharts.jsとjqueryでtableをグラフ化するスクリプト・「jQuery HighchartTable」

jQuery HighchartTable jQuery HighchartTableはHighCharts.jsとjqueryを使ってHTMLで書いたtableのデータを自動でグラフにしてくれるスクリプトです。既存のtableにカス...

可愛らしいスタイルの日付ピッカーを実装するスクリプト・「DATEDROPPER」

DATEDROPPER DATEDROPPERは可愛らしいスタイルの日付ピッカーを実装するためのスクリプトです。jQueryに依存しています。よく見かける日付ピッカーはその月のカレンダーから選択するスタイルがほぼ定番ですが、こちらはス...

OpenTypeやTrueTypeフォントをパース出来るスクリプト・「opentype.js」

opentype.js opentype.jsはOpenTypeやTrueTypeフォントをパースする為のJavaScriptライブラリです。パスや、メトリックスを調整する事でフォントを別の形状に変化させる事が出来る、というものっぽい...

デザイン性と柔軟性にフォーカスしたD3.jsベースのチャートライブラリ・「Taucharts」

Taucharts Tauchartsはデザイン性と柔軟性を重視したD3.jsベースのJSライブラリです。多くのチャートライブラリが見難いと感じた為、本職のデザイナーや情報視覚化の専門家の監修のもと、情報の整理、可視性が向上されたデザ...

フリックにも対応のレスポンシブなスライダーを実装出来るスクリプト・「Flickity」

Flickity Flickityはスマフォのフリック操作にも対応したレスポンシブなイメージスライダーの為のスクリプトです。非依存型ですが、jQueryを使ってセッティングのコードを簡略化する事も出来るように設計されているみたいです。...

ページ遷移にアニメーションエフェクトを付加するスクリプト・「Animsition」

Animsition Animsitionはページ遷移時にアニメーションエフェクトを加える事ができるJavaScriptです。jQueryに依存しています。エフェクトのセッティングはカスタムデータ属性で出来るので手軽に導入できそうです...

別アイコンにアニメーション付きで切り替える方法をまとめている・「MENU TO CROSS ICON」

MENU TO CROSS ICON MENU TO CROSS ICONは別アイコンにアニメーションエフェクト付きで切り替える方法を紹介しているWebサイトです。SVGやアイコンフォント、ユニコードと、CSS3やJavaScript...

GithubのリポジトリやGistのフィードを表示するスクリプト・「github-feed.js」

github-feed.js github-feed.jsはGithubのリポジトリやGistのフィードを表示するスクリプトです。jQueryに依存しています。シンプルで良いですね。Gistのタイトル部分はdescriptionの...

ブラウザのタブテキストを別のテキストと交互に表示可能にするスクリプト・「blinkTitle.js」

blinkTitle.js blinkTitle.jsはブラウザのタブの表示されたタイトルテキストを別のテキストと交互に表示させるスクリプトです。アラートなど任意のタイミングでtitleタグのテキストを他のテキストと交互に表示し、点滅...

様々な値チェックが可能なJavaScriptライブラリ・「is.js」

is.js is.jsは様々な値の判定が可能なJSライブラリです。正規表現や文字列、オブジェクト、時間などをis.dateとかis.number、is.emailといったようなというメソッドでチェックする事が出来ます。まだちゃんと触っ...

シングルページ向けのWebサイト他言語化スクリプト・「jquery.localizationTool.js」

jquery.localizationTool.js jquery.localizationTool.jsはWebサイトを多言語化する為のスクリプトです。jQueryに依存しています。シングルページ向け、というのは、本スクリプトがAP...

シングルページで構成されたWebアプリケーションの為のJavaScriptフレームワーク・「Composer.js」

Composer.js Composer.jsはシングルページのWebアプリ向けに作られたJavaScript MVCライブラリです。jQueryまたはMootoolsのいずれかに依存するみたいですね。圧縮版で12kbと、軽量なのも素...

他言語化の為のJavaScriptライブラリ・「FormatJS」

FormatJS FormatJSはWebアプリの他言語化をサポートするJSライブラリです。米Yahoo!が開発、OSSとしてソースコードが公開されています。基本的には他のライブラリ(Handlebars、React、Dust)との統...

Googleマテリアルデザインを取り入れたAngularJSベースのRWD対応フロントエンドフレームワーク・「lumX」

lumX lumXはAngularJSベースのフロントエンドフレームワークです。スタイルにGoogleマテリアルデザインを取り入れており、レスポンシブWebデザインにも対応しています。より速く、簡単にWebアプリケーションを設計するサ...

AngularJS用のUIフレームワーク・「Suave UI」

Suave UI Suave UIはAngularJS向けに作られたUIフレームワークです。AngularJSベースのWebアプリ開発の際にUI構築をサポートする為に作られたフレームワークみたいですね。各コンポーネントはFont Aw...

SVGをインラインに展開し、CSSでスタイル出来るようにするJSライブラリ・「deSVG」

deSVG deSVGはSVGをインライン展開してCSSでスタイリング出来るようにする為のJavaScriptライブラリです。<img>タグのsrc属性に挿入したsvgファイルを<svg>タグで表示出来るように...

グラデーションな三角形パターンを作成するスクリプト・「TRIAGONAL ROTICEROD」

TRIAGONAL ROTICEROD TRIAGONAL ROTICERODはグラデーションカラーな三角形パターンを作成できるスクリプトです。上図のように三角形のオブジェクトを敷き詰めてグラデーションカラーにする事が出来ます。本スク...
Ads