no-image

JavaScript

タッチ対応のドロワーコンポーネント「hy-drawer」

hy-drawerはタッチに対応したドロワーコンポーネントです。AndroidとiOSで自然な感じになるように焦点を当てているとのこと。モバイルアプリのような操作感がとても快適です。オプションもいくつか用意されており、カスタマイズして使うこともできます。

hy-drawer

デモ

上記はMixin Exampleになります。この他にも、Vanilla JS、jQuery、WebComponentによるサンプルが用意されています。

デモページでは、左上にあるハンバーガーメニューアイコンをクリックすると、左からスライドでメニューが登場します。メニューが表示中の時にはコンテンツ部分にオーバーレイがかかるので、メニューの内容に集中しやすくなります。

メニューの外をクリックすると、スライドとともにメニューが非表示になり通常画面に戻ります。

サクサク動作するのでストレスなくとても快適にメニューの開閉ができますね。モバイルアプリのような操作感で、パソコンでもスマホでも違和感なく操作できる印象です。

またオプションにはopened、align、range、persistent、preventDefault、threshold、mouseEventsという項目があり、これらのセッティングの調整ができます。

その他、メソッドにはopen、close、toggleが、イベントにはhy-drawer-init、hy-drawer-perpare、hy-drawer-slidestart、hy-drawer-slideend、hy-drawer-transitioned、hy-drawer-moveが用意されています。

hy-drawer

Epic SpinnersCSSによる素敵なスピナーコレクション「Epic Spinners」前のページ

カルーセルのスライドショーとズーム機能を備えた「Zoom SlideShow」次のページZoom SlideShow

関連記事

  1. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  2. Image Lightbox
  3. jQuery toTop()

    JavaScript

    シンプル・軽量でカスタマイズもできる滑らかなスクロール「jQuery toTop()」

    jQuery toTop()はトップへ行くための滑らかなスクロールを実…

  4. JavaScript

    巻き簾のようにメニューを開閉するアニメーションを実装できるjQueryプラグイン「Makisu」

    巻き簾のようにリスト化した要素を1つずつ開いていったり閉じていったりで…

  5. pixelate.js
  6. JavaScript

    レスポンシブ対応で優雅なエフェクトが印象的なjQueryスライダー「Juicy Slider」

    レスポンシブに対応している軽量のjQueryスライダー「Juicy S…

最近の記事

  1. グーディオ オーガニックチョコレート(ミント)
  2. チキンバターマサラとシュリンプバターマサラ
  3. 恵比寿のダ・ミケーレのピザ
  4. ハムエッグホットサンドとドリップコーヒー
  5. 高輪ゲートウェイ駅のスタバ

アーカイブ

PAGE TOP