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/

  • この記事を書いた人

九十九史恩

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

よく読まれている記事

条件の0=0は全てが正であるを意味するSQL 1

SQLの条件に0=0のような記述を見かけます。 変わった書き方の条件ですが、これは「全てが正である」事を意味しており、結合条件の場合はCROSS JOINと同じです。 下記の例で言えば、結合するsub ...

DISTINCTを使わないで重複排除を考えるSQL 2

SQLのDISTINCTはEXISTSとかGROUP BYでなんとかする事もできます。 DISTINCTは暗黙的なソートがされますが、何のDBを使うにせよ過去のバージョンならともかく、最近のバージョン ...

RFC 5322に準拠させた正規表現言語別 3

RFC5322で定義されている正規表現を、各言語の正規表現に変化させた形になります。 完全な電子メール正規表現は存在しないので、結局のところ何かの公式基準に従っていたとしても、自分が携わるサービスのル ...

-JavaScript