Help us understand the problem. What is going on with this article?

jRumbleで要素を揺らしてみた備忘

jRumble使ってみた備忘

2019年のサイボウズデイのkintoneの発表の中で
jRumbleが使用されているのを拝見して使ってみたいなと思ったのがきっかけです。

必要なもの

jquery(https://code.jquery.com/)
※3.4.1で実施しました。

(補足メモ)
uncompressed・・・コメントあり。開発時に使用を想定。
minifield・・・コメントなど除外した軽量版。稼働時に使用を想定。
slim・・・ajax,effectsを省いたコメントありのバージョン
slim minifield・・・ajax,effectsを省いてコメントなどを除外した軽量版。

jRumble(https://jackrugile.com/jrumble/)

やったこと

ドットインストールの「JavaScriptでストップウォッチを作ろう」を元にして、
Stopボタンを押下された時にStartボタン押下時からStopボタン押下時までの差分のミリ秒が3で割り切れる数字の場合は、
timer要素(ストップウォッチの秒が表示されている要素)をjRumbleで揺らす。
Startボタンがクリックされると揺れを停止する。

トリガーを設定
◆今回は、「Stop」ボタンをクリックされた時のイベントリスナーに以下を追加
※ elapsedTimeは、「Start」ボタン押下時と「Stop」ボタン押下時のミリ差分を保持

if(elapsedTime%3 === 0){
    $('#timer').trigger('startRumble');
}

◆「Start」ボタンをクリックされた時のイベントリスナーに以下を追加

$('#timer').trigger('stopRumble');

揺れ幅の設定(クリックされた時の挙動)

$('#timer').jrumble({
    x: 10,
    y: 10,
    rotation: 4
});

実演/感想

*反省点gifうまく作れなかった。
*意外と3で割り切れるとこでStopできない。
*面白い。。。IT関係ない部署の方が見たらバグか何かと勘違いしかねない気もした。

jRunble.gif

参考

https://code.jquery.com/
https://jackrugile.com/jrumble/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away