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のご紹介でした。

関連記事

  1. Houdini

    JavaScript

    シンプルな折りたたみ・展開やアコーディオンを実装できる「Houdini」

    Houdiniはシンプルな折りたたみ・展開ができる機能やアコーディオン…

  2. no-image
  3. no-image

    JavaScript

    シンプルなバナースライドショーを実装できる「jsslider」

    jssliderはシンプルなバナースライドショーを実装できるjQuer…

  4. Grasp Mobile Progress Circle
  5. Bootstrap Dropdown Hover
  6. no-image

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP