转换scaleX并保持固定的正确位置 [英] Transform scaleX and maintain fixed right position

问题描述

使用jquery用mousemove缩放某些文本，但无法弄清楚如何使右侧(h2)的单词从单词的右侧固定位置向右侧缩放.相反，它总是从单词的左边缘开始缩放.

Using jquery to scale some text with mousemove but can't figure out how to make the word on the right (h2) scale out to the left from the right side of the word from the fixed right position. Instead it always scales from the left edge of the word.

我希望两个单词组合在一起以始终填充窗口的宽度，并且随着光标向左移动，左边的单词(h1)缩小，右边的单词(h2)增长，反之亦然.

I want the 2 words combined to fill the width of the window at all times and as the cursor moves left, the left word (h1) shrinks and the right word (h2) grows and vice versa.

还有一个问题，我正在使用一些脚本将每个单词缩放到document.ready上窗口宽度的50％，但是同样，正确单词(h2)会根据CSS字体大小和原始位置从其原始位置缩放因此可以缩小页面.

There is also a problem that I am using some script to scale each word to 50% of the window width on document.ready, but again the right word (h2) scales from its original position based on the css font size and so scales off the page.

使用text-align: right无效.如何在窗口中保留正确的单词并向左扩展? jsFiddle

Using text-align: right has no effect. How can I keep the right word contained in the window and scale out to the left? 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>

推荐答案

我进行了一些改进，结果如下:

I've made several improvements and here is the result: https://codepen.io/adelriosantiago/pen/RwryoLj?editors=1010

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

The issue was a missing transform-origin: top right; on the CSS of H2. This sets the origin point where all translations, scale and rotations will be made.

还需要在mousemove事件内部计算originwidth，因为它每次计算转换时都会改变.

Also originwidth was needed to be calculated inside the mousemove event because it changes every time the transform is calculated.

其他一些改进是:

• 现在仅使用一个mousemove事件.
• 字符串模板文字，例如scale(${ scaleX }, ${ scaleY })用于简化字符串的构建方式.

• Only one mousemove event is now used.
• String template literals like scale(${ scaleX }, ${ scaleY }) are used so that it is easier to discern how the string is built.

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

This further version allows setting a size when the page is loaded first time and no mousemove event has happened yet: https://codepen.io/adelriosantiago/pen/vYLjybR?editors=0111

这篇关于转换scaleX并保持固定的正确位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！