フレキシブル、軽量なアニメーションライブラリ「anime.js」

フレキシブル、軽量なアニメーションライブラリを紹介します。

フレキシブルで軽量なアニメーションライブラリ「anime.js」
anime.js

anime.jsの紹介

anime.jsは、フレキシブル、軽量なアニメーション用JSライブラリです。

様々なアニメーションを実装することができます。

アニメーションのサンプル
anime.js

サンプル2
mgs anime.js logo

他にも、サンプルがあります。

anime.jsの使い方

ソースコードはGitHubで公開されています。

JS

anime.min.jsを読み込みます。

<script src="anime.min.js"></script>

ターゲット要素を指定して、スクリプトを実行します。

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: {
  value: 180,
  duration: 1500,
  easing: 'easeInOutQuad'
  },
  scale: {
  value: 2,
  delay: 150,
  duration: 850,
  easing: 'easeInOutExpo',
  },
  loop: true,
  direction: 'alternate'
});

人気の記事

2017年、人気の無料WordPressテーマ100選
2017年、人気の無料WordPressテーマ100選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,600