今回初めてお仕事として謎解きサイトを作ることになったのですが、その中でイラストを動かすjavascriptで指定の場所と物の組み合わせで３つあえば隠し扉が開く的なギミックを作ることになりました。（昔のRPGで石像とか動かしたみたいに）
canvasとかp5.jsとかそういったものを使おうと思ったのですが、これまでjsはサイト制作で使用するアニメーション程度しか実装経験がなく、納期を考えると今から学習するのでは間に合わない。
そこで簡単に実装できるプラグインがないか調べたところ、intract.jsというプラグインを使用すると割と簡単に実装できたので今回はintract.jsについてまとめてみました。
目次
interact.jsとは？
簡単にドラッグ＆ドロップを実装できる、JavaScriptのプラグインです。
jsの基本的な記述が分かれば、比較的に簡単に導入ができるのでオススメです！
また要素をドラッグ＆ドロップできるだけでなく、指定の位置にドロップされたことを判定できるので当たり判定的なことができます。
今回はこんな感じのものを作ってみました。
See the Pen Untitled by KazukiYoza (@kazukiyoza) on CodePen.
ざっくりとしか触ってないですが、
- 移動範囲の制限
- 当たり判定
は簡単に実装できました！
一般的なコーポレートサイトではあまり使うことはないと思いますが、もしもの時のために覚えておくと何かの役に立つかも？！
interact.js公式サイト
interact.js – JavaScript drag and drop, resizing and multi-touch
gestures for moder…
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)
参考記事
AC Creative Lab. | Webプログラ…
Interact.jsを使ってインタラクティブな要素の移動や回転を作る方法 | AC Creative Lab.
ユーザの手によってタグの大きさや位置を、ドラッグして移動や拡大させたいとき、簡単に実装で
あわせて読みたい
interact.js – JavaScript drag and drop, resizing and multi-touch
gestures for moder…
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)
あわせて読みたい
interact.js – JavaScript drag and drop, resizing and multi-touch
gestures for moder…
JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers (and also IE9+)
iwb.jp
1分でできるJavaScriptのinteract.jsのドラッグ&ドロップ
目次interact.jsとは要素をドラッグできるようにするドラッグした要素をドロップする範囲を作成 interact.jsとは JavaScriptのドラッグ&ドロップの処理を簡単に実装できるJ…
