Home » Jquery » javascript – How can I trigger on mouse movement Variable font in different section?-Exceptionshub

javascript – How can I trigger on mouse movement Variable font in different section?-Exceptionshub

Posted by: admin February 24, 2020 Leave a comment

Questions:

I was looking to trigger different sections with a variable font based on my mouse movement.

For the first section, everything looks great, but when I tried to trigger the second section, it does not work as I expected since is connected to the first one I guess.

I would need to make the section working independently and in the correct way (to have an idea see section one how react in debug mode)

I was wondering what I have to modify in my Javascript code to make my snippet work with all the sections I want, working independently with their respective variable font interaction. Any ideas?

$('.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/

How to&Answer:

See working FIDDLE

You had to change the y variable because you were calculating with the offset top of the mouse position inn the document. This is always bigger than the element, so you have to extract the offset top of the element you were scrolling on, to get the right value.

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