3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

HTMLスーパー初心者、Anime.jsを使ってみる

Posted at

ライブラリを使うにあたり、めちゃめちゃ手前でつまずいたので備忘的に記録する。

Anime.jsとは

HTMLで画像やら文字やら記号やらを動かすことに特化したライブラリ(ざっくり)。
公式サイト(https://animejs.com/)を見ると、めちゃめちゃエグイ動きをする。

問題発生:スーパー初心者、ライブラリのインストールの仕方が分からない

使いやすいと噂のライブラリを使いたいがライブラリを使うために、そもそも何をどうしたら使える状態になるのかが分からない。
公式サイトのダウンロードボタンを押してダウンロードしても、めちゃめちゃ丁寧に書かれているサイトを見ても、何をどうするのかがまじで全然わからない(絶望)。何故ならスーパー初心者だから。

解決策:スーパー初心者、jsDelivrからコードを取得する

jsDelivrからHTMLに埋め込む用のコードが取得できるという情報を入手。
一番上で「lib/anime.min.js」でCopyHTMLを実行し、コードを取得。
このコードをHTMLのコード内に記載すれば、ライブラリが使える。

animejs.png

実装:スーパー初心者、サンプルコードを使う

初心者はコードを読むな、コピペしろ。
公式サイト(https://animejs.com/)の一番下にある、「Documentation」「Examples」からいい感じのものを拝借する。
モーションとコードがセットになっているので、スーパー便利。
特に「Moving letters」は無限に遊べる。

animejs_2.png

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?