コント：せーかくについて行く！？　MBTI診断

※コードは下部へ

コード解説編

HTML

< div id=”stArea”>
< div id=”stlkr”><img src=”img/home/mouse.png” width=”50″ height=”auto”></div>
<h1 id=”col_title”>Mouse Stalker</h1>
</div>

まずマウスストーカーのエリアをid=“stArea”として指定します。もちろん任意のネーミングで構いません。さらにストーカーさせる要素をid=”stlkr”として指定します。サンプルではネズミの画像を使っています。

CSS

/* マウスストーカー */
#stlkr{
position: absolute;
top:100px;
transition: 0.3s;
transition-timing-function: ease-out;
}

/* ストーカーの範囲 */
#stArea{
width: 100%;
height: 1000px;
position: relative;
background: linear-gradient(-45deg, #d4f2fb, #f0d9fd, #ecdcfb, #fcd7f2, #eaf9ff),#eedefb; }

ストーカー要素には position: absoluteに。ぬるっとした動きをつけるために  transition: 0.3s、 transition-timing-function: ease-outにしてあります。topは初期位置の指示です。

JavaScript

const stalker = “#stlkr”; // マウスストーカー要素
const StalkerArea = “#stArea”; // マウスストーカーが動く場所を指定

// 変数を宣言
const stkrSize = parseInt($(stalker).css(“width”).replace(/px/, “”));
const stkrPosX = parseInt($(stalker).css(“left”).replace(/px/, “”));
const stkrPosY = parseInt($(stalker).css(“top”).replace(/px/, “”));
const cssPosAjust = stkrPosX + (stkrSize / 2);
let stkrFix = false;
let scale = 1;
let scroll = 0;

// 追従する処理
$(StalkerArea).hover(function(){
$(StalkerArea).mousemove(function(e){
if(stkrFix == false){
let x = e.clientX – cssPosAjust;
let y = e.clientY + scroll – cssPosAjust;
$(stalker).css({
“transform”: “translate(” + x + “px,” + y + “px) scale(” + scale + “)”,
});
}
});
}, function(){
$(stalker).css({
“transform”: “”
});
});

// 追従後の処理
$(mouseTarget).hover(function(){
stkrFix = true;
scale = 2;
let _width = parseInt($(this).css(“width”).replace(/px/,””));
let _top = $(this).position().top;
let _left = $(this).position().left;
let x = _left – stkrPosX – (stkrSize / 2) + (_width / 2);
let y = _top – stkrPosX;
$(stalker).css({
“transform”: “translate(” + x + “px,” + y + “px) scale(” + scale + “)”,
});
}, function(){
stkrFix = false;
scale = 1;
});

$(window).scroll(function(){
scroll = $(window).scrollTop();
});

JavaScriptでは、動かしたいエリア上にマウスが乗っている場合、ストーカー要素のCSSをtransformさせる設定を行います。追従させる際と追従前後のscaleを変化させていきます。最後にscrollの動きをscrollTopと規定してフィニッシュです。