[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ

コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい~ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。

使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプト

画像: 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アニメーションを使ったスライダー。アニメーションが非常に快適で、傾いたままスライドしてパタッとなるのが気持ちいいです。

デモのキャプチャ

jQuery.Stacky -GitHub
デモページ

水平方向にパネルを追加したり、削除したり、伸ばしたり、レイアウトを構築できます。Webアプリや管理画面によさそうです。

デモのキャプチャ

minigrid
minigrid -GitHub
デモページ

レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。
参考: minigridの使い方

デモのキャプチャ

gridstack.js
gridstack.js -GitHub
デモページ

ドラッグ&ドロップでカードを移動させたい時はこちら。Bootstrap v3対応のマルチカラムグリッドを生成します。

デモのキャプチャ

jQuery.fullContent -GitHub
デモページ
参考: jQuery.fullContentの使い方

ブラウザいっぱいに表示した複数のコンテンツをマトリックス状に切り替えます。

デモのキャプチャ

StickyStack -GitHub
デモページ

一味異なるスクロールエフェクトで、垂直に配置した各パネルを上部に固定配置しながら、積み重ねるようにスクロールさせます。言葉で説明するのが難しい動きです。

デモのキャプチャ

Enllax.js -GitHub
デモページ

スクロールと連動して各要素がさまざまな方向からさまざまな速度・エフェクトで表示されます。実装は各要素のdata属性に指定するだけの簡単設計です。

デモのキャプチャ

makefixed.js -GitHub
デモページ

指定した要素をスクロール時に固定表示し、しかもcallback関数が利用できるので固定表示中にスタイルを変更することもできます。
例えばサイドバーの要素を指定し、固定表示時にサイズを変えたり、カラーを変えたりできます。

デモのキャプチャ

Sticky Elements -GitHub
デモページ

これもスティッキー系スクリプトですが、各要素にさまざまな設定をすることができます。デモではスピードやポジションや軸など個別に設定した動きをチェックできます。

デモのキャプチャ

Auto Hide Sticky Header
デモページ

スクロールするとヘッダが隠れ、上部にスクロールする時に表示させます。

デモのキャプチャ

AnimateTransition
デモ: パネル
デモ: ポップアップ

コピペで簡単利用、軽量のCSS3アニメーションでパネルやポップアップを表示します。

デモのキャプチャ

Drop.js
Drop.js -GitHub
デモページ

ホバーやクリックすると、ドロップダウンやフロートしたコンテンツをアニメーションで表示します。

デモのキャプチャ

sliiide
sliiide -GitHub
デモページ

天地左右のどこにでもスライドのアニメーションで表示されるパネルを作成します。

デモのキャプチャ

TabTab.js
TabTab.js -GitHub
デモページ

軽快なアニメーションで動作するアクセシブルなタブを実装します。
タブってこういう使い方もできるんだという発見があると思います。

デモのキャプチャ

List.js
List.js -GitHub
デモページ

リストやテーブルをフレキシブルに、ソート・フィルタ・検索などの機能を加えます。

デモのキャプチャ

FormButtons
FormButtons -GitHub
デモページ

最初の表示はボタン、クリック・タップするとアニメーションでさまざまなフォーム要素に変化します。

デモのキャプチャ

Stretchy
Stretchy -GitHub
デモページ

フォームのテキスト入力やセレクトメニューなど、入力データに応じてサイズを最適化します。

デモのキャプチャ

Random Color -GitHub
デモページ

ランダムで素敵なカラーを生成します。レッド系・ブルー系・白黒系・パステル系・ダーク系など、色相・コントラストなどを設定できます。

top of page

©2017 coliss