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. Owl Carousel

    JavaScript

    タッチ操作やレスポンシブにも対応したカルーセルを実装できるjQueryプラグイン「Owl Carou…

    素晴らしいカルーセルを実装できるjQueryプラグインがあったのでご紹…

  2. hummingbird-popover

    JavaScript

    高速・軽量なコンテキストメニュー実装「hummingbird-popover」

    hummingbird-popoverは高速・軽量なコンテキストメニュ…

  3. tsorter

    JavaScript

    テーブルにソート(並べ替え)機能を実装できる「tsorter」

    tsorterは、JavaScriptを用いてHTMLテーブルにソート…

  4. Random Quote Machine

    JavaScript

    ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

    Random Quote Machineは、設定したデータのなかからラ…

  5. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  6. ReadRemaining.js

    JavaScript

    記事を読むのにかかる時間を教えてくれるjQueryプラグイン「ReadRemaining.js」

    ReadRemaining.jsは記事を読むのにどのくらい時間がかかる…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP