Как я могу вызвать движение мыши Переменный шрифт в другом разделе?

Question

Я искал для запуска различные разделы с переменным шрифтом в зависимости от моего движения мыши.

Для первого раздела все выглядит отлично, но когда я пытался вызвать второй раздел, он не работает как Я ожидал, так как он связан с первым, я думаю.

Мне нужно, чтобы раздел работал независимо и правильно (чтобы иметь представление, см. Раздел первый, как реагировать в режиме отладки)

Мне было интересно, что мне нужно изменить в своем коде Javascript, чтобы мой фрагмент работал со всеми нужными разделами, независимо работая с их взаимодействием с переменным шрифтом. Есть идеи?

$('.square').on('mousemove', function(e) {
  var x = e.pageX - $(this).offset().left;
  var y = e.pageY;
  var $tlSquare = $('.division--top.division--left');
  var $trSquare = $('.division--top.division--right');
  var $blSquare = $('.division--bottom.division--left');
  var $brSquare = $('.division--bottom.division--right');
  var squareWidth = $(this).width(),
    squareHeight = $(this).height();

  $tlSquare.width(x).height(y);
  $trSquare.width(squareWidth - x).height(y);
  $blSquare.width(x).height(squareHeight - y);
  $brSquare.width(squareWidth - x).height(squareHeight - y);

  stretchLetter(false);
});


stretchLetter(false);

$('.square').on('mouseleave', function() {
  $('.division').width('50%').height('50%');
  $('.letter').css('transform', '');
  stretchLetter(false);
});

function stretchLetter(animation) {
  $('.letter').each(function() {
    var parentWidth = $(this).parent().width();
    var parentHeight = $(this).parent().height();
    var thisWidth = $(this).width();
    var thisHeight = $(this).height();
    var widthPercent = parentWidth / thisWidth;
    var heightPercent = parentHeight / thisHeight;
    var timing = animation == true ? .5 : 0;

    TweenMax.to($(this), timing, {
      scaleX: widthPercent,
      scaleY: heightPercent
    })
    //$(this).css('transform', 'scalex('+ widthPercent +') scaley('+ heightPercent +')');
  });
}

body,
html {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-family: helvetica;
}

section {
  height: 200px;
  background: blue;
  color: white;
  font-size: 28px;
}

.wrapper {
  display: flex;
  justify-content: center;
  /*justify-content: flex-end;*/
  width: 100%;
  height: 100vh;
  //background-color: blue;
  overflow: hidden;
}

.square {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: black;
}

.square-2 {
  display: flex;
  flex-wrap: wrap;
  width: 100vh;
  height: 100vh;
  background-color: yellow;
}

.division {
  //display: flex;
  //align-items: center;
  //justify-content: center;
  width: 50%;
  height: 50%;
  //background-color: red;
  //border: 1px solid white;
  box-sizing: border-box;
}

.letter {
  cursor: -webkit-grab;
  cursor: grab;
}

.letter {
  display: inline-block;
  font-size: 50vh;
  margin: 0;
  padding: 0;
  line-height: .8;
  transform-origin: top left;
  color: white;
}


/* .division:nth-child(1){
	background-color: blue;
}
.division:nth-child(2){
	background-color: red;
}
.division:nth-child(3){
	background-color: green;
}
.division:nth-child(4){
	background-color: orange;
} */

.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid white;
  background-color: blue;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>SECTION-01</section>
<main>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">L</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
  <section>SECTION-02</section>
  <div class="wrapper">
    <div class="square">
      <div class="division division--top division--left">
        <div class="letter">F</div>
      </div>
      <div class="division division--top division--right">
        <div class="letter">A</div>
      </div>
      <div class="division division--bottom division--left">
        <div class="letter">S</div>
      </div>
      <div class="division division--bottom division--right">
        <div class="letter">T</div>
      </div>
    </div>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>

https://jsfiddle.net/CAT999/ohaf61qp/5/

Answer 1

См. Рабочий FIDDLE

Вам пришлось изменить переменную y, потому что вы рассчитывали с верхом смещения положения мыши в документе. Это всегда больше, чем элемент, поэтому вы должны извлечь верхнюю часть смещения прокручиваемого элемента, чтобы получить правильное значение.

var y = e.pageY - $(this).offset().top;