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

Question

使用 jquery 缩放带有mousemove 的一些文本，但无法弄清楚如何使右侧的单词（h2）从固定的右侧位置从单词的右侧向左扩展。相反，它总是从单词的左边缘开始缩放。

我希望这 2 个单词组合在一起以始终填充窗口的宽度，并且随着光标向左移动，左侧单词 (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

问题是 H2 的 CSS 上缺少 transform-origin: top right;。这将设置进行所有平移、缩放和旋转的原点。

还需要在 mousemove 事件内计算 originwidth，因为每次计算转换时它都会发生变化。

其他一些改进是：

• 现在只使用了一个mousemove 事件。
• 使用String template literals 和scale(${ scaleX }, ${ scaleY }) 之类的，以便更容易辨别字符串是如何构建的。

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