ロールオーバーした要素を起点に(画面全体含めて)マウスに追従させたい
リンクの演出として実現したいことがあり投稿させていただきました。
実現したいことは下記の通りです。
- リンク要素にロールオーバーした際に画面全体を拡大表示(アニメーション不要)
- 拡大された際に該当リンク要素+マウスが画面中央に来るように
- リンク要素にマウスが乗っているあいだは(画面全体含めて)マウスの動きに追従(アニメーション不要)
- リンク要素からマウスが外れたら標準表示(拡大率1.0)に戻る
解決したい問題
上記「2」以降の実装。
以下に現状のコードを示します。
Sass(scss)
@import "compass";
.zoom {
@include scale(2);
}
JavaScript(jquery-3.1.1.min使用)
var main =
{
handlerInOutHandler: function(e)
{
$('body').toggleClass('zoom');
}
};
$(function()
{
$('a').on('mouseenter mouseleave', main.handlerInOutHandler);
});
以上、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。