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. Sliiide

    JavaScript

    シンプルなスライディングメニューを実装できる「Sliiide」

    Sliiideはシンプルなスライディングメニューを実装することができる…

  2. notifit

    JavaScript

    多彩なカスタマイズができるシンプルなjQuery通知プラグイン「notifit」

    notifitは多彩なカスタマイズが可能なシンプルな通知機能を実装でき…

  3. jQueryTween

    JavaScript

    軽量で軽快なアニメーションをするjQueryプラグイン「jQueryTween」

    jQueryTweenは軽量で軽快なアニメーションを実装することができ…

  4. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  5. slimMenu
  6. scroll-scope.js

    JavaScript

    親要素の影響を受けずに子要素だけを固定してスクロールさせる「scroll-scope.js」

    scroll-scope.jsは親要素の影響を受けずに子要素だけを固定…

最近の記事

  1. ライオン システマ 超コンパクト ふつう
  2. タリーズ ハムチーズ&サラダサンド
  3. クリニカのY字タイプのフロス
  4. 日和山公園の桜
  5. 成城石井 フレンチロースト

アーカイブ

PAGE TOP