👌

anime.js - お試し編/簡易

2022/08/31に公開約700字

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

ログインするとコメントできます