0

リンクの演出として実現したいことがあり投稿させていただきました。
実現したいことは下記の通りです。

  1. リンク要素にロールオーバーした際に画面全体を拡大表示(アニメーション不要)
  2. 拡大された際に該当リンク要素+マウスが画面中央に来るように
  3. リンク要素にマウスが乗っているあいだは(画面全体含めて)マウスの動きに追従(アニメーション不要)
  4. リンク要素からマウスが外れたら標準表示(拡大率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);
});

以上、ご教授いただけますと幸いです。
どうぞよろしくお願いいたします。

5
  • 具体的に現在の実装に対してどのような問題が発生しているのでしょうか?transform-originの計算は不足しているように思いますが。
    – pgrho
    2017年1月22日 12:24
  • ご回答ありがとうございます。transformはsass+compassで@include scale(拡大率)としてclassを付与するようにしており、それをjsからtoggleしています。…という意味ではなくてでしょうか??? 最終的に出力されているcssはこのようになっております。 ※拡大率を2とした場合 class名 { -moz-transform:scale(2, 2); -ms-transform:scale(2, 2); -webkit-transform:scale(2, 2); transform:scale(2, 2) } 2017年1月22日 12:33
  • 2
    現在の質問文の内容ですと、ある程度実装されていることは伝わりますが実際のコードがなく、また全体の目的は記載されていますが何が問題になっているかが伝わりにくいです。このような状態ですと回答をしようとしたときに全体を再度コーディングしなければなりません。ですので質問文を編集して、解決したい問題とその問題が発生するコードを記載して頂けないでしょうか。
    – pgrho
    2017年1月22日 15:02
  • アドバイスいただきありがとうございます!質問文を修正させていただきました。なお実装方法がそもそもまだなのでエラーは発生しておりません。よろしくお願いいたします。 2017年1月23日 1:38
  • 一部コードに誤りがあったので修正しました。 2017年1月23日 3:35

1 件の回答 1

0

最初にコメントに書いた通り、transform-originの問題だと思われます。

質問のコードでは変形の原点であるtransform-originが明示されていないため、transformbody要素の中心を基準として適用されます。このためa要素にマウスをホバーし、transformが適用された瞬間にa要素の位置が変わり、結果としてすぐにonmouseleaveが発生することになります。

これに対処するためにはonmouseenteraの場所に応じたtransform-originを設定してやる必要があります。例えばカーソル位置(e.clientX, e.clientY)を基準にするのであれば

$('a').on('mouseenter', function (e) {
    var p = $('body').offset();
    var w = $('body').width();
    var h = $('body').height();
    var xr = (e.clientX - p.left) / w;
    var yr = (e.clientY - p.top) / h;
    var origin = (100 * xr).toString() + '% ' + 100 * yr + '%';
    $('body').addClass('zoom').css({
        '-webkit-transform-origin': origin,
        'transform-origin': origin
    });
});

のように計算してやる必要があります。上では単位に%を使用していますが、pxでもよいです。またリンクの中心($(this).offset().left + $(this).width() / 2)を基準とすることもできます。

1
  • おぉぉぉぉぉ!!!ありがとうございます!!!!! なるほど理解いたしました。わざわざコードまで書いていただき感謝いたします。重ねて御礼申し上げます。 2017年1月23日 5:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。