Question

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

非常感谢。

Answer 1

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

此外，您必须将变量与要移动的图像相关联。但Studio32Avril使用的解决方案并不是完整的，因为浏览器在移动时必须渲染每个像素。为了更好的转换使用translateX或translateY，这些是为动画动作制作的！

祝你好运，编码愉快！

Answer 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>

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

2 个答案: