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. Building a Vertical Timeline With CSS and a Touch of JavaScript
  2. JavaScript

    スクロール時にナビゲーションが上部に固定されるレスポンシブ対応のjQueryプラグイン「HeadSh…

    スクロールするとナビゲーションが上部に固定配置されるjQueryプラグ…

  3. Morphext

    JavaScript

    複数テキストをアニメーションで切り替えていくjQueryプラグイン「Morphext」

    MorphextというjQueryプラグインを使えば、複数テキストをア…

  4. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  5. NO IMAGE

    JavaScript

    テキストコンテンツをページ分割(ページネーション)できる「jPaginate」

    jPaginateはWebページ内のテキストコンテンツをページ分割(ペ…

  6. JavaScript

    テキストに滑らかに動くアニメーションをつけることができるjQueryプラグイン「animateTex…

    テキストに滑らかに動くかっこいいアニメーションをつけることができるjQ…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP