JavaScript

リスト内にある項目をアニメーションしながら追加・削減できる「Animating List Items」

Animating List Itemsはリスト内にある項目をスウィングやフェードといったアニメーションをしながら追加や削減をすることができます。少しのJSで作成できるので軽さを求める方にはピッタリではないでしょうか。

Animating List Items

Animating List Items

Animating List Items

実際のデモではADD A LIST ITEMというボタンをクリックするとアイテムがアニメーション付きで追加され、各アイテム自体をクリックすると削減されます。

アニメーションにはいくつかのパターンが用意されており、フェード、スライドダウン&フェード、スウィングイン、サイドからのスウィングといったものがあります。

また、他にもアニメーションなしといった設定にすることも可能です。

アニメーションはCSSのカスタマイズで設定することができるので管理もしやすそうだし手軽に変更できるのがいいですね。

動きがあることによってリスト内の変化にも気づきやすくなるのでユーザビリティも向上するかと思います。

そんなわけで、アニメーション付きでコンテンツを表示・非表示にすることができるAnimating List Itemsのご紹介でした。

command + Zを戻すMacの「command + z」で消えたものを元に戻すショートカットキーのやり方前のページ

Airmail 2をMacのデフォルトメールソフトに設定するやり方次のページAirmail 2をMacのデフォルトメールにする

関連記事

  1. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  2. no-image

    JavaScript

    フラットでシンプルなカラーピッカー実装「Pickr」

    Pickrはフラットでシンプルなカラーピッカーを実装できるのが特徴です…

  3. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

  4. jQuery Context Menu

    JavaScript

    軽量でシンプルなコンテキストメニューを実装できる「jQuery Context Menu」

    jQuery Context Menuは、軽量でシンプルなコンテキスト…

  5. no-image
  6. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

最近の記事

  1. メンソレータム リップスティック
  2. スイデンテラス 濃厚バターチキン
  3. ドトール マンデリン
  4. 厚切りトーストツナチーズメルトとブラックコーヒー
  5. ドトール マイルドブレンドコーヒー

アーカイブ

PAGE TOP