使用带有渐变的 translateX 在 mousemove 上显示图像答案

【问题标题】：Image Reveal on mousemove using translateX with gradient使用带有渐变的 translateX 在 mousemove 上显示图像
【发布时间】：2016-05-05 23:25:52
【问题描述】：

$(document).ready(function() {
  var $window = $(window),
    $overlay = $('.example2'),
    rotation = 0,
    transOver = 0

  $window.on('mousemove', function(event) {
    transOver = (event.pageX / $window.width() * 1720) - 690;
    $overlay.css('transform', 'translateX(' + transOver + 'px)');
  });
});

.img-responsive {
  display: block;
  width: 100%;
  height: auto;
}
.stopOverflow {
  overflow-x: hidden;
  overflow-y: hidden;
}
#container {
  position: relative;
  width: 500px;
  height: 500px;
}
img {
  top: 0;
  left: 0;
}
.example3 {
  position: relative;
  z-index: -3;
}
.example2 {
  position: absolute;
  z-index: -2;
  bottom: 0;
  top: 0;
}
.example1 {
  position: absolute;
  z-index: -1;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container" class="stopOverflow">
  <img class="example1 img-responsive" src="http://i.imgur.com/iHBQH7o.png">
  <img class="example2 img-responsive" src="http://i.imgur.com/0sBuSLm.png">
  <img class="example3 img-responsive" src="http://i.imgur.com/9T7zUhd.png">
</div>

所以我有 3 张图片（如果有更好的方法来处理这个问题，我会全力以赴）。我需要的效果是让淋浴看起来像是在打开。我目前正在使用 3 层。顶层只是淋浴喷头。中间层是带有渐变的图像，底部是水。图像大小相同，并设置为响应式。

问题在于具有渐变的图像在不同的分辨率下向左或向右移动太少或太多。我确信这是因为我正在使用的价值观。我只需要它在多个尺寸的显示器上保持一致。移动显然不是问题。小提琴贴在下面

https://jsfiddle.net/5v0b7tL8/2/

【问题讨论】：

好的，所以我回答了我自己的问题。我将 translateX 更改为使用 % 而不是 px。这终于让它始终如一地工作了。

标签： jquery css transform mousemove translate-animation

【解决方案1】：

所以我通过查看这个代码笔想通了

http://blog.mediamonkfish.com/animating-css3-gradients-on-mouse-move/

我仍然使用图像，但将脚本更改为这个

$window.on('mousemove', function(event) {
    transOver = (event.pageX / $window.width() * 100);
    $overlay.css('transform', 'translateX(' + transOver + '%)');
  });

将其设置为使用屏幕的百分比，使其保持一致。至少我认为这是它与使用设定像素量相比所做的。

【讨论】：