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

    JavaScript

    インタラクティブなライティングエフェクトを実装できる「normalmap.js」

    normalmap.jsはシンプルでインタラクティブなライティングエフ…

  2. no-image

    JavaScript

    レスポンシブ対応のjQuery Lightbox & Popupプラグイン「Flashy」

    Flashyはレスポンシブに対応したjQuery Lightbox &…

  3. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  4. no-image

    JavaScript

    シンプルなドロップダウンメニューを実装できるjQueryプラグイン「snakeMenu」

    snakeMenuはシンプルなアニメーションによるドロップダウンメニュ…

  5. share-this

    JavaScript

    テキストを選択してシェアできるMediumライクな「share-this」

    share-thisはテキストを選択して手軽にTwitterやFace…

  6. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

最近の記事

  1. Anker Bolder LC30
  2. BG-R10
  3. EOS R6

アーカイブ

PAGE TOP