kissui.scrollanim

JavaScript

スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

kissui.scrollanimは、CSS3を活用したスクロールによる多彩なアニメーションを実装できるライブラリです。スクロールすることでフェードで表示・非表示したり、バウンスしたりとさまざまなアニメーションを加えることができます。特定の要素に動きをつけて、注目させたいときなんかに活用してみてはいかがでしょうか。

kissui.scrollanim

デモ

スクロールしていくと、テキストがフェードで表示されたり、バウンスで表示されたり、無限にアニメーションがリピートされたりと、さまざまなアニメーションを実装できます。

イベントごとに好きなアニメーションを設定できるので、好みにあわせてカスタマイズして使いたい人にもピッタリです。具体的なイベントには、in、out、middle、center、top、bottom、left、rightといったものが用意されています。

アニメーションには、バウンス、シェイク、スウィング、フェード、フリップ、回転、ズーム、スライドなど豊富な項目があり、フェード一つとっても、fadeIn、fadeInDownBig、fadeInLeft……と、かなり細かい動きにも対応できるかと思います。

イベントとアニメーションを組み合わせることで、多彩なバリエーションを楽しめそうですね。

kissui.scrollanim

関連記事

  1. no-image

    JavaScript

    フロントエンドアプリケーションを構築するためのJSライブラリ「HyperApp」

    HyperAppは、フロントエンドアプリケーションを構築するための1K…

  2. Tipr

    JavaScript

    軽量、フラット、シンプルなツールチップを実装できるjQueryプラグイン「Tipr」

    Tiprはフラットでシンプルなツールチップを実装することができるjQu…

  3. jquery.inputmask

    JavaScript

    テキスト入力のマスク(入力補助)を作成する「jquery.inputmask」

    jquery.inputmaskは、ウェブページでのテキスト入力のマス…

  4. Foxholder
  5. jQuery Timespace

    JavaScript

    四方にドラッグ移動できる水平タイムライン実装「jQuery Timespace」

    jQuery Timespaceは上下左右と四方にドラッグ移動できる水…

  6. scrollama.js

    JavaScript

    スクロールイベントを実装できるモダンで軽量なJSライブラリ「scrollama.js」

    scrollama.jsは、スクロールイベントを実装することができるモ…

最近の記事

  1. ルック セレクション
  2. シルキーウインドモバイル
  3. アリエール パワージェルボール3D
  4. NuAns × Shibaful TAGPLATE

アーカイブ

PAGE TOP