I'm attempting to replicate the concept of this video https://www.superhi.com/video/barron-webster using text, but I am encountering difficulties in achieving the desired effect. The design text is currently overlapping my name and displaying in reverse instead of interacting with each other horizontally 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,
...
...<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>LSNR.B</h1>
<h2>
DESIGN
</h2>