Barron Webster javascript

user_13892026 0
Viewed 58

I'm trying to recreate this video https://www.superhi.com/video/barron-webster but with text and cant seem to get it quite right https://text-9.superhi.com/ the design text is over lapping my name and its showing backwards instead of pushing each other side to side like in the original video.

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>

css html javascript
1 Answers

With some help from adelriosantiago over at this post I created. He figured out that I was missing the proper transform-origin property on the h2 in this jsFiddle. Setting it to transform-origin: top right; makes it all work as in this jsFiddle.

Then he went a step further and really simplified the jquery code as so:

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>

user_25889530
Related