title: On mousemove translate div position within a specified range
body: <p>I have a wrapper called <code>#mousearea</code> and I have a div called <code>#mouseshift</code> what I would like to do is when I hover over <code>#mousearea</code> I would like to shift the <code>translate3d(0,230%,0)</code> value between a particular range.</p>
  
  <p>I have got the mousemove working but I currently end up with something like <code>translate3d(7881%,230%,0)</code> it's just too sensetive I would like it to translate the X co-ordinate between something like <code>0-60%</code> so it's far more subtle.</p>
  
  <p>Here is what I have so far:</p>
  
  <pre><code>jQuery(document).ready(function($){
      $('#mousearea').mousemove(function (e) {
  
          var shiftAmount = 1;
  
          $('#mouseshift').css(
              'transform', 'rotate(90deg) translate3d(' + -e.pageY + shiftAmount + '%,230%,0)'
          );
      });
  });
  </code></pre>
  
  <p>Update:</p>
  
  <p>This is a little closer, except it logs the correct translate3d but doesn't apply it to #mouseshift.</p>
  
  <pre><code>$('#mousearea').mousemove(function(e){
          var x = e.pageY - this.offsetTop;
          var transfromPosition = 'translate3d(' + x + ', 230%, 0)';
          console.log(transfromPosition);
  
          if ((x &lt;= 800)) {
              //$('#mouseshift').css({'top': x});
              $('#mouseshift').css('transform', transfromPosition);
          }
      });
  </code></pre>
  
  <p><strong>Final Solution:</strong></p>
  
  <pre><code>jQuery(document).ready(function($){
  
      $('#mousearea').mousemove(function(e){
  
          var min = 50;
          var max = 70;
  
          var x = e.pageY;
          var windowHeight = window.innerHeight;
  
          scrolled = (x / windowHeight);
          percentageScrolled = scrolled * 100;
  
          offsetScroll = max - min;
          offsetPercentage = scrolled * 20;
          translateX = min + offsetPercentage;
  
  
          console.log(x + 'px');
          console.log(windowHeight + 'px window height');
          console.log(percentageScrolled + '% scrolled');
          console.log(offsetScroll + 'offset scroll');
          console.log(offsetPercentage + '% offset percentage');
  
  
  
  
          var transfromPosition = 'rotate(90deg) translate3d(' + translateX + '%, 230%, 0)';
          $('#mouseshift h1').css('transform', transfromPosition);
      });
  
  });
  </code></pre>
  
  <p>Convert to a reusable plugin I would like to extend this to work with more than one object now and each object would have a different max and min value:</p>
  
  <p>This is what I have but it seems to effect all the items on only use on elements max and min.</p>
  
  <pre><code>$(function () {
      $('#mouseshift-1, #mouseshift-2').mouseShift();
  });    
  (function ($) {
      $.fn.mouseShift = function () {
          return this.each(function () {
              var myEl = $(this);
              var min = $(this).data('min');
              var max = $(this).data('max');
  
              $('#mousearea').mousemove(function (e) {
                  var yPosition = e.pageY;
                  var windowHeight = window.innerHeight;
  
                  scrolled = (yPosition / windowHeight);
                  //percentageScrolled = scrolled * 100;
                  offsetRange = max - min;
                  offsetRangePercentage = scrolled * 20;
                  offset = min + offsetRangePercentage;
  
                  ////  Debug
                  console.log('max: ' + max + ', Min:' + min);
                  console.log(yPosition + 'px');
                  console.log(windowHeight + 'px window height');
                  //console.log(percentageScrolled + '% scrolled');
                  console.log(offsetRange + 'px offset scroll');
                  console.log(offsetRangePercentage + '% offset percentage');
  
                  var transfromPosition = 'rotate(90deg) translate3d(' + offset + '%, 230%, 0)';
                  myEl.css('transform', transfromPosition);
              });
          });
      };
  })(jQuery);
  </code></pre>
  
  <p>And some HTML for clarity:</p>
  
  <pre><code>&lt;div class="column"&gt;&lt;h1 id="mouseshift-1" data-min="50" data-max="70"&gt;boo&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="column"&gt;&lt;h1 id="mouseshift-2" data-min="20" data-max="90"&gt;bah&lt;/h1&gt;&lt;/div&gt;
        &lt;div class="column"&gt;&lt;h1 id="mouseshift-3" data-min="80" data-max="100"&gt;bing&lt;/h1&gt;&lt;/div&gt;
  </code></pre>