html - 变换 scaleX 并保持固定的正确位置

Question

使用 jquery 缩放一些文本 mousemove但无法弄清楚如何使右侧的单词(h2)从固定的右侧位置从单词的右侧向左扩展。相反，它总是从单词的左边缘开始缩放。
我希望这两个词组合起来始终填充窗口的宽度，当光标向左移动时，左词 (h1) 缩小，右词 (h2) 增长，反之亦然。
还有一个问题，我正在使用一些脚本将每个单词缩放到 document.ready 窗口宽度的 50%，但同样正确的单词 (h2) 根据 css 字体大小从其原始位置缩放，因此缩放这一页。
使用 text-align: right没有效果。如何保持窗口中包含正确的单词并向左扩展？ jsFiddle

var originwidth = $('h1').width()
var originheight = $('h1').height()
var origh1scalex = $(window).width()/2 / $('h1').width()
var origh2scalex = $(window).width()/2 / $('h2').width()

$(function() {    
  $('h1').css('transform', 'scaleX(' + origh1scalex + ')'); 
  $('h2').css('transform', 'scaleX(' + origh1scalex + ')');
});

$(document).on('mousemove', function(event) {
  var scaleX = event.pageX / originwidth
  var scaleY = event.pageY / originheight

  $('h1').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})

var originwidth = $('h2').width()
var originheight = $('h2').height()

$(document).on('mousemove', function(event) {
  var scaleX = ($(window).width() - event.pageX) / originwidth
  var scaleY = event.pageY / originheight

  $('h2').css('transform', 'scale(' + scaleX + ',' + scaleY + ')')
})

h1,
h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

hgroup {
  display: block;
}

body {
  line-height: 1;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: Arial;
  font-size: 32px;
  line-height: 1.5;
  background-color: #ffdc00;
  color: #333333;
}

h1 {
  font-size: 5vw;
  font-weight: 700;
  position: fixed;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

h2 {
  font-size: 5vw;
  font-weight: 700;
  position: fixed;
  top: 0;
  right: 0;
  transform-origin: 0 0;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>LSNR.B</h1>
<h2>DESIGN</h2>

Answer 1

我做了一些改进，结果如下:https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010
问题是缺少 transform-origin: top right;在 H2 的 CSS 上。这将设置所有平移、缩放和旋转的原点。
还有 originwidth需要在 mousemove 内计算事件，因为它每次计算变换时都会发生变化。
其他一些改进是:

只有一个 mousemove现在使用事件。

String template literals喜欢 scale(${ scaleX }, ${ scaleY })使用，以便更容易辨别字符串是如何构建的。

这个进一步的版本允许在第一次加载页面时设置大小，没有 mousemove事件尚未发生:https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111