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