kissui.scrollanim

JavaScript

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

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

kissui.scrollanim

デモ

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

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

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

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

kissui.scrollanim

プレーンテキストでペーストEvernoteのペースト時にリッチテキストではなくプレーンテキスト(スタイルなし)にする方法前のページ

軽量で依存しないピュアJavaScriptライブラリによるズーミング実装「Lightense Images」次のページLightense Images

関連記事

  1. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  2. Animated Heat Distortion Effects with WebGL

    JavaScript

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

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

  3. JavaScript

    2KB程の軽量&シンプルなjQueryスライダー「Craftyslide」を使ってみた

    とてもシンプルで軽量ないい感じのjQueryプラグイン「Craftys…

  4. NavSync

    JavaScript

    ナビゲーションとコンテンツが連動するjQueryプラグイン「NavSync」

    NavSyncはナビゲーションとコンテンツが連動してアニメーションする…

  5. jquery-confirm

    JavaScript

    アラートやダイアログなどさまざまな機能を実装できる「jquery-confirm」

    jquery-confirmはアラートやconfirm、ダイアログなど…

  6. JavaScript

    ニュースやお知らせなどに使えるティッカー「jQuery WebTicker」

    ニュースやお知らせなんかに使えるティッカー「jQuery WebTic…

最近の記事

  1. 長十郎
  2. COMOLI シルクネルシャツ
  3. WiMAX
  4. 甘柿
PAGE TOP