HTMLでモーダルUIを作るときに気をつけたいこと - ICS MEDIA
ダイアログやハンバーガーメニューといったユーザーインタフェース（UI）は、多くのウェブサイトで利用されており頻繁に見かけます。どこでも見かけることから「簡単に作成できる」と思われがちですが、意外と実装が難しいUIです。たとえば、エンジニアでなくとも、以下のような現象に気付いたことはないでしょうか？ ダイアログを表示中に、裏側のコンテンツがスクロールできてしまった ダイアログを表示中に、Tabキーでキーボード操作を行うと裏側を操作できてしまった ▼裏側がスクロールできてしまう例 ▼裏側がキーボード操作できてしまう例 これらを解決するためには、手軽な正攻法はなく、複雑なJavaScriptの制御が必要になります。本記事では、ダイアログやハンバーガーメニュー等のモーダル系のUIに存在する気付きづらい問題点と、解決方法を紹介します。ダイアログとハンバーガーメニューはそれぞれ役割の異なるUIですが、
簡単な設定で使える軽量でモダンなキーバインドライブラリ・「tinykeys」
tinykeysは簡単な設定で使える軽量でモダンなキーバインドJavaScriptライブラリです。 以前にもwhenipressというライブラリをご紹介しましたがtinykeysの方が若干使いやすい印象でした。 上にサンプルを用意しましたが、反応が無い場合はCodepen内にフォーカスしてからお試しください。 使い方も非常にシンプルです。 <script src="https://cdn.jsdelivr.net/npm/tinykeys/dist/tinykeys.umd.js"></script>tinykeysを読み込みます。 tinykeys(window, { "Shift+D": () => { alert("ShiftとDが押されました！"); }, "y e s": () => { alert("YES！はいそうです！"); } });キーの設定とキーが押されたときの内容を
Selecto.js - Web上でドラッグで選択するUXを実現 MOONGIFT
Webアプリケーションが広く使われるようになり、さもローカルアプリケーションと同じように操作できるようになっています。しかし、デスクトップの操作に近づけば近づくほど、ちょっとした操作性の違いに違和感を感じるようになります。 今回はドラッグして選択する操作をサポートするSelecto.jsを紹介します。この操作、デスクトップでは当たり前なのでWebでもできるようになると便利でしょう。 Selecto.jsの使い方 下にあるタイルが選択された状態です。 マウスでドラッグして選択できます。 キーボードとの組み合わせで複数回の選択もできます。 選択してドラッグ移動といった使い方もできます。 Selecto.jsが使われそうなのはExplorerやFinderといったファイル管理を提供する場合でしょう。同様に複数のファイルやオブジェクトをまとめて選択させたり、それを移動したりするのにSelecto.
[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK！ Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
![[JS]スマホ・タブレットでの操作性を重視したタッチデバイス対応のさまざまなスライダーを実装できるスクリプト -Swiper](https://cdn-ak-scissors.b.st-hatena.com/image/square/cacff14f89d3ccb1fc0c8101d8047f5b3b8b070e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015030201.png)
Draggable Dual-View Slideshow | Codrops
An experimental slideshow that is draggable and has two views: fullscreen and small carousel. In fullscreen view, a related content area can be viewed. Today we’d like to share an experimental slideshow with you. The idea is based on the great navigation concept from the Wild website where one can view the projects in either fullscreen or in a carousel mode. There are different techniques that wou
コナミコマンドをウェブサイトに実装できる「cheet.js」
欧米ではプレイステーション4とXbox Oneが発売され家庭用ゲーム機が世代交代を迎えていますが、家庭用ゲーム機の元祖ともいうべきファミリーコンピューター(ファミコン)で、一世を風靡した隠しコマンド「コナミコマンド」を、ウェブサイトに実装することができるのが「cheet.js」です。 cheet.js - easy easter eggs (konami code, etc) for your site http://namuol.github.io/cheet.js/ コナミコマンドは、コナミのゲームで多く使われた隠しコマンドの一種。コントローラーで「上上下下左右左右BA」とボタン入力するのが基本形ですが、この他にもいろいろな派生コマンドがあり、また、コナミ以外のゲームでも取り入れられるほどに有名な隠しコマンドだったので、とりあえずゲームプレイ時にはコナミコマンドを試してみた人もいるはず
QuestionMark.js
When the user pushes the ? key, QuestionMark.js triggers a modal window that displays keyboard shortcuts for your app — similar to what happens on Twitter, Gmail, GitHub, etc. Hat tip to Robert Nyman. The modal is removed when the ESC key is pushed or the user clicks behind the modal. I think every app that has keyboard shortcuts should do this. This could also be a generic 'help' menu for the app
Webベースのダイナミックでクールなプレゼンテーションを実装する為のJavaScriptフレームワーク・Mosho
Web上でプレゼンする為のJavaScript フレームワーク、Moshoのご紹介です。 impress.jsライクなダイナミックな 動きのプレゼンテーションをHTMLで 実装する事が可能です。シンプルで 良かったのでお勧め。 この手のは色々出ていますので探せばいくらでも見つかると思いますが、MoshoはjQueryやmootoolsなどのライブラリに依存しないスクリプトですので覚えておいて損は無いかも。 よくあるプレゼンのやつ。HTML5/CSS3/JavaScriptで作ります。サイズは非圧縮版で15KBほど。 以下にサンプル用意しました。矢印キーで操作します。 Sample data属性で指定するスライドごとの動きはimpress.js同様、カスタムデータ属性で操作します。 <div class="mosho-slide" id="3d-transform" data-x=1120
[JS]任意のキーを組みあせて、イベントを設定できる超軽量スクリプト -jwerty
コナミコマンド（上上下下左右左右BA）など任意のキー操作を組みあせて、エレメントやイベントを設定できる超軽量(1.5kb)のスクリプトを紹介します。 jwerty [ad#ad-2] jwertyはjQueryなど他のスクリプトに依存しないで動作するスクリプトで、minified版で1.5kbと超軽量です。 ※jQueryと一緒に設置することはできます。 jwertyの使い方 使い方は簡単で、外部ファイルとして当スクリプトを指定し、キー操作ごとにエレメントやイベントを設定します。 キーボードのスタイルがかわいかったので、キャプチャで実装例を紹介します。 jwertyの実装例 [ad#ad-2] jwrtyのサイトでは、下記のショートカットが用意されています。 zipでダウンロード Ctrl+Alt+z tarでダウンロード Ctrl+Alt+Shift+z jwerty -GitHubにア
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
