はじめに
こんな風に画像を「とことこ歩かせるアニメーション」を、HTMLとjQueryとjRumbleというプラグインを使って実装します！
名前だけ見ると難しそうですが、コードは短くコピペでも動くので試してみてください!
jQueryとjRumbleの読み込み
HTMLファイルのheadタグの中に下記のCDNをコピペで貼り付けてください。
<script src="js/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jrumble/1.3.0/jquery.jrumble.min.js"
integrity="sha512-0vcUK0oQ15FtIrg1bbNL6zO2yB0pSZjPZERBNA0ZXIw/7jsSHu+rxxbpbM20wIaiEofTK9oPoP/Y8xvh3qoasQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
実際のコード
まずコードを貼りますのでここまでのコピペだけで動きます！
下記のコードをHTMLに記述してもらえれば動くと思います!
画像はお好きなものに変えてください。
少し解説見たいよって方は是非読み進めてみてください!
<body>
<img src="./アイス.png" id="img">
<script>
//画像の横移動
$("#img").animate({ marginLeft: "100%", }, 4000, "linear", function () {
$("#img").animate({ marginLeft: "0%" }, 4000,"linear", function() {
$("#img").animate({ marginLeft: "100%" }, 4000,"linear")
})
});
//画像をブルブル震わせる
$("#img").jrumble({
x: 0,
y: 0,
rotation: 5,
speed: 100
});
$("#img").trigger('startRumble')
</script>
</body>
【解説】 横移動とブルブル震わせる動き を組み合わせる
横移動
jQueryの animate() を使います!
今回はmarginleftの値を変更していく事で、移動しているように見せています!
marginLeft: "100%"
↑ここの数値を変える事で移動範囲の変更ができます。(左端が0%、画面の右端が100% なので止めたい所を探ってみてください)
4000,
↑ここの数値を変える事で、移動スピードを変えることができます。(数値が小さいほど早くなる)
行を増やすごとにループ数も増やせます!
//画像の横移動
$("#img").animate({ marginLeft: "100%", }, 4000, "linear", function () { //初期位置から右端に移動
$("#img").animate({ marginLeft: "0%" }, 4000,"linear", function() { //右端から左端に移動
$("#img").animate({ marginLeft: "100%" }, 4000,"linear") //左端から右端に移動
})
});
ブルブル震わせる
jRumbleというプラグインを使って震わせます!
このプラグインで色々な震わせ方ができますが、今回は使っている物だけ紹介します!
下記で動きの設定をしています。今回は揺れの少ない動きにしています。
$("#img").jrumble({
x: 0,
y: 0,
rotation: 5,
speed: 100
});
下記で動きのスタートタイミングとストップのタイミングを設定します。
今回は常に動いている設定にしています!
$("#img").trigger('startRumble')
まとめ
今回のアニメーション、ググってもあまり似たもの出てこなかったので書いてみました!
jRumbleの動きを変えたい方は、
https://jackrugile.com/jrumble/
上記の公式サイトの「Usage」という所に他のパターンが載っているので、ぜひ試してみてください!