缩放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>

- MilkyTech

Answer 1

我做了几次修改，以下是结果：https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010

问题在于H2的CSS缺少transform-origin: top right;。这将设置所有翻译、缩放和旋转所需的原点。

此外，需要在mousemove事件中计算originwidth，因为每次计算变换时它都会改变。

其他一些改进包括：

• 现在只使用一个mousemove事件。
• 使用类似scale(${ scaleX }, ${ scaleY })的字符串模板字面量使其更易于分辨字符串的构建方式。

此后版本允许在页面第一次加载时设置大小，尚未发生mousemove事件：https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111

- adelriosantiago

---

这对于 mousemove 效果非常好，但是我需要每个单词的初始比例为窗口的50%。（就像页面在光标直接位于页面中心加载一样）。那就是顶部代码的原因。 - MilkyTech

啊，现在我明白了那段代码的要点。我已经将代码提取到一个函数中，然后当有mousemove事件时，它将使用鼠标的数据，否则它将设置为50%大小。这是示例：https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111。您可以在函数顶部设置初始设置。 - adelriosantiago

另外，我发现我错过了原始代码无法工作的真正原因。这主要是由于CSS中缺少了transform-origin: top right;。您可能希望在原始片段中尝试一下。 - adelriosantiago

啊哈！原来这就是为什么它不能向左扩展。这段代码真棒。比我之前做的简单多了。谢谢你。也许可以将代码放入 SO 片段供未来用户使用。Codepen 链接可能不会永久存在。 - MilkyTech

是的，在原始代码片段中进行了小改动，现在它完美地运行了。我仍然更喜欢你的代码！ - MilkyTech