Javascriptでアニメーションを簡単に使える「move.js」を使ってみる
TOC
簡単な記法で、アニメーションをすることができます。
中では、transition-delayとかを使っているようです。
インストール
1 | $ bower i move.js |
※ i と書くと、installを略すことができます。
head タグ内で読み込むと怒られる!
中でonload時にdocument.bodyを呼び出しているので、
head タグ内で scriptタグで読み込むとエラーが出てしまいます。
解決策は2つあります。
- webpack などを使用して bundle し、それを body タグで読み込む
- body タグ内で読み込む
- js から動的に読み込む
おすすめは webpack ですが、手軽ではないので、
body タグと js から動的に読み込む方法を紹介します。
body タグ内で読み込む場合
1 | <body> |
js から動的に読み込む場合
次のように読み込みましょう!
アニメーションしよう!
まず構文。
1 | move("クエリ")/*..... アニメーション処理 */.end(); |
move()
からend()
の間に処理を書くわけです。
処理は、公式サイトにたくさん書いてあります。
ここでは一部を紹介します。
cssプロパティを指定する
1 | .set("CSSプロパティ名", 値) |
例:
1 | move("div.box") |
アニメーションの時間を指定する
1 | .duration("秒数") |
例:
1 | move("div.box") |
移動する
1 | .translate(x, y) |
例:
1 | move("div.box") |
アニメーションが終わった後に実行する
1 | .then()/* 処理 */.pop() |
例:
1 | move("div.box") |
例では、移動をしてから、opacityを0に指定します。
便利なので、使ってみてください!