NAVER製のオープンソースなUIインタラクションライブラリ・「egjs」 egjs egjsはLINEでおなじみのNAVERが公開しているUIインタラクションセットライブラリです。Webアプリ構築の際に開発スピードに貢献する事が目的のようで、OSSとして提供してくれています。jQueryを使って更に機能を拡...2016.11.01 | 10時31分09秒
レスポンシブなオーバーレイメニュー構築のためのフレームワーク・「responsive-overlay-menu」 responsive-overlay-menu See the Pen Responsive overlay menu - full menu with second menu example by Mario Loncarek (@ri...2016.10.16 | 11時14分46秒
複雑なアニメーションにも対応できる、パフォーマンス重視のJavaScriptアニメーションエンジン・「KUTE.js」 KUTE.js KUTE.jsは高度なカスタムアニメーションにも対応できるパフォーマンス重視のJavaScript製アニメーションエンジンです。本サイトTOPにもあるような複雑なアニメーションコンテンツの実装をサポートしてくれます。コ...2016.10.13 | 10時26分10秒
軽量で非依存型のパーティクルエンジン・「particles.js」 particles.js particles.jsは軽量で他ライブラリに依存しない非依存型のパーティクルエンジンです。簡易的なものですが圧縮版で2.5kbほどと軽量で依存せず単体で動作してくれるのと、設定が簡単で扱いやすい印象です...2016.10.09 | 10時06分43秒
手軽にダミー画像を作成出来る軽量スクリプト・「placeholder.js」 placeholder.js placeholder.jsはクライアントサイドでダミー画像を生成する軽量スクリプトです。jquery等の他ライブラリへの依存もなく、2kb以下と軽量なのも良いですね。表示される画像はBase64ですが生...2016.10.04 | 10時11分55秒
input要素の入力をサポートする非依存スクリプト・「Cleave.js」 Cleave.js Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力...2016.09.30 | 9時45分07秒
Githubのコードを任意のWebページに埋め込める・「github-embed」 github-embed github-embedはGithubのコードを任意のWebページに埋め込むためのスクリプトです。上図のように複数ファイルを同時に埋め込む事も可能です。Gistライクにリポジトリ内のコードを埋め込めるgist...2016.09.26 | 10時16分27秒
アニメーションしながら色が変化するグラデーションを作成出来るスクリプト・「Granim.js」 Granim.js Granim.jsはアニメーションしながら一定の時間毎に色を変更させるグラデーションを作成できるスクリプトです。非依存型で単体で動作してくれます。サイズも圧縮版で10kb前後となっています。設定項目は色の指定、グラ...2016.09.25 | 10時19分24秒
モニタサイズ次第で入りきらない部分だけスライドインさせるレスポンシブなメニュースクリプト・「okayNav」 okayNav okayNavはモニタサイズ次第では入りきらない部分をスライドインするようにしてくれるスクリプトです。jQueryに依存します。メニューの種類が多いコンテンツや動的、増え続ける等、ケースによってはよく紹介されているよう...2016.09.11 | 10時46分01秒
テキストにCSS3のアニメーションエフェクトを付与するスクリプト・「txt.wav」 txt.wav txt.wavは上記のようにテキストにCSS3ベースのアニメーションエフェクトを付与するスクリプトです。非依存型で単体で動作しますが、基本的にJavaScriptは1文字ずつ包括するシンプルなもので、エフェクトはkey...2016.09.06 | 10時02分11秒
Bootstrapでのtableにソートやページネーション、検索機能等を付与するスクリプト・「jQuery Bootgrid」 jQuery Bootgrid jQuery BootgridはBootstrap上でのtableを多機能にするスクリプトです。jQueryに依存します。thにカスタムデータ属性を与える必要がありますが、tableをthの内容毎にソー...2016.08.30 | 10時25分41秒
YoutubeやVimeo、Vineなどのembedをレスポンシブにする非依存の軽量スクリプト・「superembed.js」 superembed.js superembed.jsはYoutubeやVimeo、Vine等の動画共有サービスのembedをレスポンシブWebデザインに対応する為のスクリプトです。CSSで動画要素を包括して、といった作業の必要もなく...2016.08.27 | 10時11分30秒
JavaScriptのTipsを不定期で紹介する・「JS Tips」 JS Tips JS TipsはJavaScriptのちょっとしたヒントをコードとともに不定期で紹介するWebサイトです。基本的にはバニラなスクリプトが紹介されており、コードはGithubでも公開されています。8/23現在で58ほど。...2016.08.23 | 10時58分09秒
自身の技術スキルをアニメーションする棒グラフで表示できるjQueryスクリプト・「skills」 skills skillsは自身の技術スキルをアニメーションする棒グラフで表現するためのスクリプトです。jQuery依存です。よくある、スクロールに応じてアニメーションしながらグラフが設定値まで伸びる、というもの。アニメーションや...2016.08.22 | 10時04分25秒
要素の背景に水面を指でなぞるようなエフェクトを付与できるスクリプト・「jQuery Ripples」 jQuery Ripples ※Resultを押せば別の画像が表示されます。 jQuery Ripplesは要素に揺れる水面っぽいエフェクトを付与できるスクリプトです。WebGLで任意の要素に指定した画像に上記のようなエフェクト...2016.08.19 | 10時14分40秒
スクロールに応じて要素をCSS3で手軽にアニメーションさせられるライブラリ・「Kissui.scrollanim」 Kissui.scrollanim Kissui.scrollanimはスクロールに応じて要素をアニメーションしながら表示させるためのライブラリです。オシャレ感ただようWebページに大抵あるあのエフェクトを手軽に付与しよう、という...2016.08.14 | 10時25分18秒
inputに任意の接頭語を付与するスクリプト・「jquery-plugin-input-prefix」 jquery-plugin-input-prefix jquery-plugin-input-prefixはinputに任意の削除できない接頭語を付与するスクリプトです。jQueryに依存します。placeholder属性と違い、テキ...2016.08.09 | 10時07分34秒
高機能で非依存のlightboxスクリプト・「lightgallery.js」 lightgallery.js lightgallery.jsは高機能で非依存型のlightbox実装のためのスクリプトです。レスポンシブWebデザイン対応、タッチデバイス対応、自モジュール型、YoutubeやVimeo、HTML5 ...2016.08.04 | 10時45分54秒
オートコンプリートの住所検索の為のスクリプト・「Algolia Places」 Algolia Places Algolia Placesはオートコンプリートな住所検索の為のスクリプトです。上デモのようにOpenStreetMapを使って検索対象を世界にする事が可能です。高速さが売りのようですね。導入も割と簡単で...2016.07.29 | 9時30分12秒
リアルタイムにグラフを描けるチャートライブラリ・「Epoch」 Epoch Epochはリアルタイムにグラフを描くチャートライブラリです。頻繁に更新されるような時系列データをSVGを使って可視化する為の汎用ライブラリとして公開されています。D3.jsに依存するみたい。スタイリングもし易いように設計...2016.07.26 | 10時00分34秒
軽量、レスポンシブでエレガントなモーダルウィンドウを実装出来るjQueryプラグイン・「iziModal」 iziModal iziModalはRWD対応で軽量、エレガントなモーダルウィンドウの為のjQueryプラグインです。任意のコンテンツは勿論、iframeや通知などにも対応可能で、タイトルや空^設定など、細かい設定項目が用意されていま...2016.07.25 | 10時49分55秒
textareaを使ったMarkdownエディタライブラリ・「Markdown Text Editor」 Markdown Text Editor Markdown Text EditorはWebベースのMarkdownエディタです。textareaをMarkdownサポートのWYSIWYGにする、というJavaScriptライブラリで、...2016.07.24 | 9時33分27秒