变换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现在只使用一个事件。
• 使用字符串模板文字，scale(${ scaleX }, ${ scaleY })以便更容易辨别字符串是如何构建的。

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