ITエンジニア/デザイナ向けにオープンソースを毎日紹介

SPA(シングルページアプリケーション)で効果的なのがスクロールに伴うアニメーションです。ページ全体が長くなりがちなので、アニメーションを盛り込むことで変化をつけられるようになります。

今回紹介するKissui.scrollanimはCSS3ベースのアニメーションライブラリになります。高速でスムーズなアニメーションが実現できるでしょう。

Kissui.scrollanimの使い方

Kissui.scrollanimはHTMLタグで指定できます。

<p data-kui-anim="fadeIn">Show this with fade-in</p>

実際のスクロールをしているところです。

Kissui.scrollanimではコンテンツが徐々に出現したり、バウンドする、大きさを変えるといったようなアニメーションがHTMLだけで簡単に指定できます。後はスクロールをJavaScriptが検知して、コンテンツの表示されたタイミングで出現させています。Kissui.scrollanimならば簡単に導入できそうです。

Kissui.scrollanimはCSS3/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

Kissui.scrollanim - CSS3 and JavaScript scroll animation

usablica/kissui.scrollanim: CSS3 scroll animation library

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2