前端互動設計【以滑鼠方向動畫增強體驗】

在數位時代，網頁設計的創新與互動性成為吸引用戶的重要因素，而偵測滑鼠的動畫效果也愈來愈普遍，也是提升網頁互動性的熱門趨勢，以前滑鼠方面的動畫就只有簡易的hover，現在各種好玩的互動互相配合，一個又一個的好玩互動就這樣被寫出來了。

滑鼠方向偵測

利用MouseDirection類別來計算滑鼠相對於元素中心的位置，從而判斷滑鼠是從哪個方向進入或離開元素。

技術實現

滑鼠方向偵測的實現包含三個主要步驟：

初始化和選項設定：通過初始化，設定進入（enter）和離開（leave）事件的處理函數。
方向計算：calculate函數計算滑鼠的方向，使用getBoundingClientRect確定元素位置和大小。
事件綁定：監聽mouseenter和mouseleave事件，並根據計算結果觸發相應的處理函數。

實作

<div style="width: 200px;height: 200px; background-color: beige;" class="s01"></div>
  <div style="width: 200px;height: 200px; background-color: beige;" class="s02"></div>
  <div style="width: 200px;height: 200px; background-color: beige;" class="s03"></div>
  <div style="width: 200px;height: 200px; background-color: beige;" class="s04"></div>
  <div style="width: 200px;height: 200px; background-color: beige;" class="s05"></div>



  <script>

    var MouseDirection = function (element, opts) {
      opts = Object.assign({
        enter: function () { },
        leave: function () { }
      }, opts);

      var dirs = ['top', 'right', 'bottom', 'left'];

      var calculate = function (element, e) {
        var rect = element.getBoundingClientRect();
        var width = rect.width || rect.right - rect.left;
        var height = rect.height || rect.bottom - rect.top;

        var x1 = rect.left;
        var y1 = -rect.top;
        var x4 = rect.left + width;
        var y4 = -(rect.top + height);
        var x0 = rect.left + width / 2;
        var y0 = -(rect.top + height / 2);

        if (Math.abs(x1 - x4) < 0.0001) return 4;
        var k = (y1 - y4) / (x1 - x4);
        var range = [k, -k];

        var x = e.clientX;
        var y = -e.clientY;
        var kk = (y - y0) / (x - x0);

        if (isFinite(kk) && range[0] < kk && kk < range[1]) {
          return x > x0 ? 1 : 3;
        } else {
          return y > y0 ? 0 : 2;
        }
      };

      element.addEventListener('mouseenter', function (e) {
        var r = calculate(this, e);
        opts.enter(this, dirs[r]);
      });

      element.addEventListener('mouseleave', function (e) {
        var r = calculate(this, e);
        opts.leave(this, dirs[r]);
      });
    };


    // 獲取所有類別名稱以 's' 開頭的元素
    var elements = document.querySelectorAll('[class^="s"]');

    // 定義進入和離開時的處理函數
    var options = {
      enter: function (elem, direction) {
        console.log("進入方向: " + direction);
        // 這裡可以添加更多進入時的處理邏輯
      },
      leave: function (elem, direction) {
        console.log("離開方向: " + direction);
        // 這裡可以添加更多離開時的處理邏輯
      }
    };

    // 為每個元素創建 MouseDirection 實例
    elements.forEach(function (element) {
      new MouseDirection(element, options);
    });


  </script>

參考:SYM 三陽機車｜JET SL+ 158 控制馭 (sym-global.com)

保留寫法

var DIR_POS = {
      left: {
        top: '0',
        left: '-100%'
      },
      right: {
        top: '0',
        left: '100%'
      },
      bottom: {
        top: '100%',
        left: '0'
      },
      top: {
        top: '-100%',
        left: '0'
      }
    };
    
    $('.ficon').each(function () {
      new MouseDirection(this, {
        enter: function ($element, dir) {
          var $content = $element.find('.mask').removeClass('trans');
          $content.css(DIR_POS[dir]);
          $content[0].offsetWidth;
          $content.addClass('trans');
          $content.css({
            left: '0',
            top: '0'
          });
        },
        leave: function ($element, dir) {
          $element.find('.mask').css(DIR_POS[dir]);
        }
      });
    });