如何根据滚动创建图像翻译效果？答案

【问题标题】：How may I create an effect of translation of an image according to the scrolling?如何根据滚动创建图像翻译效果？
【发布时间】：2015-09-12 02:01:29
【问题描述】：

我尝试重现网站 www.studio32avril.com 上的图像翻译效果。我知道我必须使用 jquery 和 css 翻译，但它们不会移动。你能帮帮我吗？

非常感谢。

【问题讨论】：

标签： jquery css scroll translate-animation

【解决方案1】：

您必须确定用户何时开始滚动：检查this Question

此外，您必须将变量与要移动的图像链接起来。但是 Studio32Avril 使用的解决方案并不高效，因为浏览器必须在移动时渲染每个像素。为了更好地变换使用 translateX 或 translateY，这些是为动画运动制作的！

祝你好运，编码愉快！

【讨论】：

【解决方案2】：

简短示例：http://jsbin.com/qizawucagu/edit?html,css,js,output

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<div class="box1"></div>
  <div class="box2"></div>
</body>
<style>.box1 {
      background: red;
      width: 120px;
      height: 50px;
      margin-top: 100px;
      margin-left: 100px;
    }
    .box2 {
      background: yellow;
      width: 60px;
      height: 40px;
    }
    body {
      height: 2000px;
    }
</style>

<script>
$(document).on('scroll', function(){
    var h = $('body').scrollTop();
    var b1 = $('.box1');
    var b2 = $('.box2');

    var x = h * 5;

    b1.css('transform', 'translateX(-' + x + 'px)');
    b1.css('-webkit-transform', 'translateX(-' + x + 'px)');

    b2.css('transform', 'translateX(' + x + 'px)');
    b2.css('-webkit-transform', 'translateX(' + x + 'px)');
});

</script>
</html>

【讨论】：