巴伦韦伯斯特 javascript答案

【问题标题】：Barron Webster javascript巴伦韦伯斯特 javascript
【发布时间】：2020-07-08 13:17:49
【问题描述】：

我正在尝试重新创建此视频https://www.superhi.com/video/barron-webster，但带有文字并且似乎无法完全正确https://text-9.superhi.com/ 设计文字过度重叠我的名字并且它向后显示，而不是像在原始视频。

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

$(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 = event.pageX / originwidth
  var scaleY = event.pageY / originheight

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

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img,
iframe {
  vertical-align: bottom;
  max-width: 100%;
}

input,
textarea,
select {
  font: inherit;
}

* {
  -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: 32px;
    font-weight: 700;
  
  position: fixed;
  top: 0;
  left: 0;
    
  transform-origin: 0 0;
}
h2 {
    font-size: 32px;
    font-weight: 700;
  
  position: fixed;
 top:0;
 right: 0;
    
  transform-origin: 0 0;
}

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

<h2>
  DESIGN
</h2>

【问题讨论】：

h2 函数中scaleX 前面的- 正在翻转DESIGN 文本
this jsfiddle 更接近，但我不知道为什么“设计”这个词不会从固定的右侧位置向左扩展。由于您不使用图像，因此您需要更多的 js 才能在页面加载时将单词缩放到页面的 50%。
我添加了一些 js 以使单词占页面的 50%，但设计文本从缩放到 50% 之前的位置开始，因此它离开了页面。 new jsfiddle。不知道如何将该单词包含在窗口中。

标签： javascript html css

【解决方案1】：

在adelriosantiago this post I created 的帮助下。他发现我在this jsFiddle 中的h2 上缺少正确的transform-origin 属性。将其设置为 transform-origin: top right; 使其一切都像在 this jsFiddle 中一样工作。

然后他更进一步，真正简化了jquery代码：

function fixTexts(event) {
  if (!event) {
    // Initial settings when the page is loaded first time
    event = {}
    event.pageX = $(window).width()/2
    event.pageY = $(window).height()/2
  }
  
  // Height is the same for both
  var originheight = $('h2').height()
  
  // For H1
  var originwidth = $('h1').width()
  var scaleX = event.pageX / originwidth
  var scaleY = event.pageY / originheight
  $('h1').css('transform', `scale(${ scaleX }, ${ scaleY })`)
  
  // For H2
  var originwidth = $('h2').width()
  var scaleX = ($(window).width() - event.pageX) / originwidth
  var scaleY = event.pageY / originheight
  $('h2').css('transform', `scale(${ scaleX }, ${ scaleY })`);
}

$(document).on('mousemove', function(event) {
  fixTexts(event)
})

fixTexts() // Run first time calculation

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: top right;
  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>

【讨论】：