Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
0
Help us understand the problem. What is going on with this article?
@nononosuque

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

More than 1 year has passed since last update.

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/

0
Help us understand the problem. What is going on with this article?
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
nononosuque
2021年は何かしらアドバンドカレンダーかけるようになりたい。 Qiitaはメモ帳がわりに、できるだけ短いものを投稿しています。 理解不足勉強不足はご容赦を。ご指摘いただけますと感謝して感激して雨霰を夢で降らせます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
0
Help us understand the problem. What is going on with this article?