kissui.scrollanim

JavaScript

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

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

kissui.scrollanim

デモ

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

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

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

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

kissui.scrollanim

関連記事

  1. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  2. jQuery contextMenu plugin & polyfill
  3. no-image

    JavaScript

    セクション間をスムーズにスクロールできる「Scroll Control」

    Scroll Controlはセクション間をスムーズにスクロールできる…

  4. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  5. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  6. no-image

    JavaScript

    ミニマリスティックでフレキシブルなjQueryスライダー「Bore Bones Slider」

    Bore Bones Sliderはミニマリスティックでフレキシブルな…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP