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. luxy.js

    JavaScript

    優雅な慣性スクロールとパララックスエフェクトを実装できる「luxy.js」

    luxy.jsは優雅で美しい慣性スクロールとパララックスエフェクトを実…

  2. simpleDialog

    JavaScript

    レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」

    simpleDialogはレスポンシブに対応したポップアップ・ダイアロ…

  3. Los Scrollos

    JavaScript

    シンプルで滑らかな水平スクロール実装「Los Scrollos」

    Los Scrollosはシンプルで滑らかな水平スクロールを実装できる…

  4. JavaScript

    jQueryで空港や駅にある掲示板のように指定した文字が切り替わっていくAirportを使ってみた

    面白いプラグインがあったので使ってみました。空港や駅にある掲示板みたい…

  5. no-image

    JavaScript

    いろんなズーム機能を実装できるjQueryプラグイン「xZoom」

    xZoomはいろんなズーム機能を実装することができるカスタマイズ性に優…

  6. JavaScript

    ウェーブ(波形)を簡単に描いてくれるjQueryプラグイン「Wave」

    WaveというjQueryプラグインを使ってみました。これを使えばウェ…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP