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