コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
最近のWebページで人気があるのは、ビジュアルの連続性。 パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。 モーダルウインドウとサイドバーのデモ コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。 cta.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="src/cta.js"></script> </body> Step 2: HTML 一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。 data
![[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/3b796beb0e3307e8d7086ea2aaa29efd7e12d443/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015042101.png)
ホイール系イベント2014年版クロスブラウザ
Updated 2014.10.15 / Published 2014.03.04 ホイール系のイベントは各ブラウザの実装がバラバラでクロスブラウザ対策に苦労するイベントのひとつとして知られているでしょうが、Document Object Model Level 3 Eventsにより標準化されたwheelイベントが多くのブラウザで実装されてきています。本エントリーでは現状のホイール操作時の各イベントについて、クロスブラウザでフォールバックしながら用いる方法を解説していきます。 ホイール系イベント比較 DOMMouseScroll, MozMousePixelScroll DOMMouseScrollイベントとMozMousePixelScrollイベントはどちらもGecko 固有のため、現存ではFirefoxしかサポートしていないイベントです。DOMMouseScrollはスクロールする
進化が止まらない！CSS3アニメーションを簡単に利用できるスクリプトやスタイルシートのまとめ
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ：ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity
デモページ: ナビゲーション Flickityの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 ※jQueryのプラグインとして利用する時は、jquery.jsを加えます。 <head> ... <link rel="stylesheet" href="/path/to/flickity.css" media="screen"> <script src="/path/to/flickity.pkgd.min.js"></script> </head> Step 2: HTML 各スライドをdiv要素などで実装し、ラッパーで内包します。 <div id="main-gallery"> <div class="gallery-cell">...</div> <div class="gallery-cell">...</div> <div cl
![[JS]ユーザーが快適に操作できることにこだわった、タッチデバイスにも対応のスライダーを実装するスクリプト -Flickity](https://cdn-ak-scissors.b.st-hatena.com/image/square/bf5475b2160c621bb7e866a6e614ec3326ad2769/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015012901.png)
[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle
ダウンロードファイルに含まれているデモ jQuery.twinkleの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script src="jquery-1.10.2.min.js"></script> <script src="../jquery.twinkle-0.7.1.js"></script> </body> Step 2: HTML アニメーションを適用する要素にclassやidを加えます。 <div id="twinkle1">click !</div> Step 3: JavaScript jQueryのセレクタで要素を指定し、スクリプトを実行します。 $(selector).twinkle(); アニメーションやエフェクトはオプションで設定します。 var options = { "effe
![[JS]フラットなデザインで映える！美しく広がる波紋のエフェクトを簡単に実装できるスクリプト -jQuery.twinkle](https://cdn-ak-scissors.b.st-hatena.com/image/square/1664f643712bb7cebf68cc882a1117f2f93e0a5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082802.gif)
[JS]モーダルボックスを実装するシンプルなスクリプト -jQuery modalBox
シンプルだけどマルチプルにカスタマイズできるモーダルボックスのスクリプトをOpen Source Projectから紹介します。 modal box デモ サイトのデモでは、ボックス内にHTMLコンテンツを配置したもの（上キャプチャ）をはじめ、AJAX、画像とよく使用されているものの動作が確認できます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]モーダルウインドウの実装を検討する時はこのスクリプトもチェック！ -vex
finefinefine.jp