AOS

JavaScript

スクロールに合わせていろんなアニメーションで表示できる「AOS」

AOSはスクロールに合わせてフェードやフリップ、ズームなどのアニメーションを加えて表示させることができる軽量のライブラリです。スクロールしたときに要素が動くので、注目度もアップしそうですね。アニメーションも滑らかでとても素敵です。

AOS

デモ

下へスクロールしていくと、フェード、フリップ、ズーム、またはそれらを組み合わせたものなど、多彩なバリエーションが用意されています。

  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-up-right
  • fade-up-left
  • fade-down-right
  • fade-down-left

フリップ、スライド、ズームなどにもいろんな種類が用意されているので、自分好みのアニメーションが見つかりやすいと思います。

どれもシンプルで違和感のないアニメーションなので、いろんなサイトで活用できるのではないでしょうか? 使い方がカンタンなところもいいですね。

というわけで、スクロールに合わせて指定した要素をアニメーション表示できる「AOS」のご紹介でした。

AOS

SwitchiOSスタイルのシンプルなチェックボックスを実装できる「Switch」前のページ

シンプルでエレガントなモーダルウィンドウを実装できる「SweetModal」次のページSweetModal

関連記事

  1. jTableScroll

    JavaScript

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

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

  2. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  3. Nivo Lightbox

    JavaScript

    Lightbox系のレスポンシブ対応のjQueryプラグイン「Nivo Lightbox」

    シンプルでレスポンシブにも対応しているLightbox系のjQuery…

  4. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  5. parallax-background.js
  6. Shuffle Images

    JavaScript

    画像をシャッフルすることができるjQueryプラグイン「Shuffle Images」

    Shuffle ImagesというjQueryプラグインを使えば、画像…

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP