[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
Post on:2015年8月24日
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい~ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプト](http://coliss.com/wp-content/uploads-201502/2015082406.png)
画像: Girly Drop
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-14.png)
Zoom.js -GitHub
デモページ
参考: Zoom.jsの使い方
Mediumで採用されているようなコンテンツの邪魔にもならず、気持ちいい操作で画像を拡大します。元に戻すにはクリック・タップ、Escキー、そしてスクロールにも対応しています。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-12.png)
Fluidbox
Fluidbox -GitHub
デモページ
レスポンシブ対応のシンプルな画像を拡大表示するスクリプト。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-13.png)
Simple Lightbox
Simple Lightbox -GitHub
デモページ
タッチデバイス対応の画像を拡大表示するスクリプト。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-10.png)
ZoomSlider
ZoomSlider -GitHub
デモページ
サムネイルは緩やかな扇状にスライドし、拡大時は奥行きを使ったアニメーションでズーム表示される、かなりダイナミックなスライダー。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-15.png)
Glide.js
Glide.js -GitHub
デモページ
タッチデバイス対応、CSS3アニメーションを使ったスライダー。アニメーションが非常に快適で、傾いたままスライドしてパタッとなるのが気持ちいいです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-05.png)
水平方向にパネルを追加したり、削除したり、伸ばしたり、レイアウトを構築できます。Webアプリや管理画面によさそうです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-03.png)
minigrid
minigrid -GitHub
デモページ
レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
参考: minigridの使い方
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-04.png)
gridstack.js
gridstack.js -GitHub
デモページ
ドラッグ&ドロップでカードを移動させたい時はこちら。Bootstrap v3対応のマルチカラムグリッドを生成します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-16.png)
jQuery.fullContent -GitHub
デモページ
参考: jQuery.fullContentの使い方
ブラウザいっぱいに表示した複数のコンテンツをマトリックス状に切り替えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-06.png)
一味異なるスクロールエフェクトで、垂直に配置した各パネルを上部に固定配置しながら、積み重ねるようにスクロールさせます。言葉で説明するのが難しい動きです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-08.png)
スクロールと連動して各要素がさまざまな方向からさまざまな速度・エフェクトで表示されます。実装は各要素のdata属性に指定するだけの簡単設計です。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-09.png)
指定した要素をスクロール時に固定表示し、しかもcallback関数が利用できるので固定表示中にスタイルを変更することもできます。
例えばサイドバーの要素を指定し、固定表示時にサイズを変えたり、カラーを変えたりできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-07.png)
これもスティッキー系スクリプトですが、各要素にさまざまな設定をすることができます。デモではスピードやポジションや軸など個別に設定した動きをチェックできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-11.png)
スクロールするとヘッダが隠れ、上部にスクロールする時に表示させます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-18.png)
AnimateTransition
デモ: パネル
デモ: ポップアップ
コピペで簡単利用、軽量のCSS3アニメーションでパネルやポップアップを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-02.png)
ホバーやクリックすると、ドロップダウンやフロートしたコンテンツをアニメーションで表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-21.png)
天地左右のどこにでもスライドのアニメーションで表示されるパネルを作成します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-17.png)
TabTab.js
TabTab.js -GitHub
デモページ
軽快なアニメーションで動作するアクセシブルなタブを実装します。
タブってこういう使い方もできるんだという発見があると思います。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-01.png)
リストやテーブルをフレキシブルに、ソート・フィルタ・検索などの機能を加えます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-19.png)
FormButtons
FormButtons -GitHub
デモページ
最初の表示はボタン、クリック・タップするとアニメーションでさまざまなフォーム要素に変化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-20.png)
Stretchy
Stretchy -GitHub
デモページ
フォームのテキスト入力やセレクトメニューなど、入力データに応じてサイズを最適化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015082405-22.png)
ランダムで素敵なカラーを生成します。レッド系・ブルー系・白黒系・パステル系・ダーク系など、色相・コントラストなどを設定できます。
sponsors