javascript iconイメージ

JavaScript

JavaScriptアニメーションライブラリ5選

1) Swiper.js

タッチスライダーを実装するためのライブラリです。

Swiperはシンプルさをもたらすために、モダンなアプリやプラットフォームのみに焦点を当てたタッチスライダーです。

Framework7やIonicFrameworkにデフォルト含まれており、海外だとかなり多くの企業サイトに実装されています。

https://swiperjs.com/

2) Greensock

サンプルを見るとよくわかるのですが、かなり高機能なアニメーションライブラリです。

堅牢なJavaScriptツールセットで、パフォーマンス、互換性、サポートにこだわりがある事を謳っています。

https://greensock.com/

3) Michalsnik

サイトがGitとdemoしかないのでわかりにくいんですが、スクロールに連動してアニメーションを発生させるライブラリです。

多くのパターンのアニメーションが定義されています。

https://github.com/michalsnik/aos

4) Three.js

有名なアニメーション系のライブラリで、グラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリです。

Three.jsはかなり多くの実例があり、ブラウザゲームや施設や地表の表現など様々な使い方がされています。

その反面、ライブラリとしては学習コストが高く、公式サイトに敷き詰められているdemoまでいくにはかなりの時間が必要です。

https://threejs.org/

5) Splide

SplideはTypeScriptで書かれた軽量かつ柔軟なスライダー/カルーセルに使えるライブラリです。

依存関係もなくLighthouseエラーもありません。

デモを見るとわかりやすいく、かなりシンプルな動きをしていますが、画像の切り替えなどこれで十分な要件も多いでしょう。

https://splidejs.com/

  • この記事を書いた人

九十九時衛

キーを叩いていないときは、都会や田舎の風景を探検しています。

-JavaScript