第7回 インタラ会 資料

テーマは「ひっぱる」


サンプルファイルはこちら↓↓ github.com

1 まずドラッグで普通に追従させる

See the Pen intr7 sample1 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・こういうものとしてはアリだが、動きが非現実的っぽすぎて直感的ではない

2 摩擦係数を追加して、ひっぱる感じをだす

(ついでに色々隠し味的なのも追加)

See the Pen intr7 sample2 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

ソース抜粋

var friction = 0.3; // 摩擦係数 小さいとより引っ張られる感じに
mouse.dist.x *= friction;
mouse.dist.y *= friction;


摩擦係数を追加するだけで、なんとなく引っ張ってる感がでる
・よりリアルで直感的なインタラクションになる


3 テキストのletterSpacingをいじってみる

See the Pen intr7 sample3 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・若干の煩わしさが何度も引っ張ってみたくなるモチベーションになる。気がする。

4 複数のオブジェクトを動かしてみる

See the Pen intr7 sample4 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

・摩擦係数をランダムにすることで、それぞれ個別の生命体のように。感じるかもしれない。

5 飛び道具的なネタ

(codepenで再現できないので動画と外部リンクで)
https://ikeryou.github.io/intr7/5/
ソースはこちら

インタラ会とは?

ikeryou.hatenablog.com