Zenn
👌

anime.js -　お試し編/簡易

2022/08/31に公開
JavaScript
#
animejs
tech

1.フォルダを作成する。

下記のフォルダとファイル(html)を作成する。(名称は適当で良い。)

frontend
　　└ test.html

2.animejsのインストール

作成したフォルダをカレントディレクトリにした状態で、

npm install animejs --save

※npmを実行できるようにするためには、node.jsをインストールしておこう。
https://nodejs.org/en/

すると下記のフォルダ(node_modules)が生成されていることがわかる。

frontend
　　├ node_modules
    └ test.html

この中(node_modules)に、anime.jsが含まれている。

3.htmlを書いてみよう。

test.html
<!DOCTYPE html>
<html>
<head></head>
<body>
  <div class="test">文字</div>

  <script src="node_modules/animejs/lib/anime.min.js"></script>
  <script>
    anime.timeline({loop: true})
         .add({
           targets: '.test',
           translateX: 1000
         });
  </script>
</body>
</html>

4.ブラウザで動かしてみよう。

ブラウザにこのファイル(test.html)をドラッグ＆ドロップしてみよう。
『文字』という文字列が(左から右に)動いていることが確認できると思う。

Discussion