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. Yet Another Ripple Plugin
  2. no-image

    JavaScript

    HTML要素を回転させれる「jquery-ui-rotatable」

    jquery-ui-rotatableはHTML要素を回転させれるjQ…

  3. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  4. animateClick

    JavaScript

    ボタンクリック時にアニメーションをつけれる「animateClick」

    animateClickはボタンをクリックしたときにアニメーションをつ…

  5. Letter Effects and Interaction Ideas
  6. Luminous

    JavaScript

    軽くてシンプルなLightboxを実装できるスクリプト「Luminous」

    Luminousを使えば軽くてシンプルなLightboxを実装すること…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6
  5. iPad Air

アーカイブ

PAGE TOP