マウスストーカー

クライアントから、複数画像が慣性付きで追従するマウスストーカーを設置して欲しいという希望があったので、色々と調べて実装してみた。

ここを参考にした。
http://infoseek_rip.g.ribbon.to/iswebmag.hp.infoseek.co.jp/sample199.html

◆ javascript

var ix0=-30, iy0=-30;
var ix1=-30, iy1=-30;
var ix2=-30, iy2=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
ix0=ix0+(mx-ix0)/10;
iy0=iy0+(my-iy0)/10;
ix1=ix1+(mx-ix1)/20;
iy1=iy1+(my-iy1)/20;
ix2=ix2+(mx-ix2)/30;
iy2=iy2+(my-iy2)/30;
img0.style.left = ix0 + “px”;
img0.style.top = iy0 + “px”;
img1.style.left = ix1 + “px”;
img1.style.top = iy1 + “px”;
img2.style.left = ix2 + “px”;
img2.style.top = iy2 + “px”;
setTimeout(“ImageMove()”,10);
}

◆ html

<body onload=”ImageMove()”>
<img id=”img0″ src=”01.jpg” style=”position:absolute; left:-30px; top:-30px;”>
<img id=”img1″ src=”02.jpg” style=”position:absolute; left:-30px; top:-30px;”>
<img id=”img2″ src=”03.jpg” style=”position:absolute; left:-30px; top:-30px;”>

で、こうなった。
http://yoshiyoshizamurai.com/pf/131214-01/01.html
※スマホやタブレットからでも、タップすれば動作を確認できます。

でも、スクロールするとストーカーの画像が置いて行かれる。

んー、マウスの座標値を取得して、その分を移動させれば良いかな。

ここを参考にした。
http://www.yoheim.net/labo/tips/getSeveralValue.html

◆ javascript

var ix0=-30, iy0=-30;
var ix1=-30, iy1=-30;
var ix2=-30, iy2=-30;
var mx=0, my=0;
document.onmousemove = MouseMove;
function MouseMove() {
mx=event.clientX;
my=event.clientY;
}
function ImageMove() {
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
ix0=ix0+(mx-ix0)/10;
iy0=iy0+(my-iy0)/10;
ix1=ix1+(mx-ix1)/20;
iy1=iy1+(my-iy1)/20;
ix2=ix2+(mx-ix2)/30;
iy2=iy2+(my-iy2)/30;
img0.style.left = scrollX + ix0 + “px”;
img0.style.top = scrollY + iy0 + “px”;
img1.style.left = scrollX + ix1 + “px”;
img1.style.top = scrollY + iy1 + “px”;
img2.style.left = scrollX + ix2 + “px”;
img2.style.top = scrollY + iy2 + “px”;
setTimeout(“ImageMove()”,10);
}

で、こうなった。
http://yoshiyoshizamurai.com/pf/131214-01/02.html

うん、いいね。

マウスストーカーは好き嫌いはあるだろうけど。

ちなみに実装したのはこのサイト。
http://fujitabo.co.jp/nozomikai/


マウスストーカー」への3件のフィードバック

  1. 今回のブログの記事とは、関係のないことなのですが、下げ緒を用いない、戸山流の一派、または、会や道場はご存知ありませんでしょうか?

  2. >KIYOさん
    コメントありがとうございます。
    過去記事に書いた戸山流の下げ緖の件は、誰かから伝え聞いた程度の情報でしたので、残念ながら詳しくは存じません。
    戸山流をやっておられる方のブログなどで聞いてみるのが良いかも知れません。

  3. >よしよし侍さん
    わかりました。
    ありがとうございます。

コメントを残す

メールアドレスが公開されることはありません。