滚动时水平移动图像,然后停止

时间:2017-01-04 08:35:45

标签: javascript jquery html css

我可以很容易地垂直移动图像,但如何使用我的方法水平移动图像?一旦我到达某一点,我也希望图像停止向那个方向移动,我不知道该怎么做,也许我可以改变它的css,一旦我得到这么多的像素就保持在一个位置。

下面的代码将它垂直移动,我可以使用类似的简单方法水平移动图像吗?

代码:

$(window).on("scroll", function() {
  var wScroll = $(this).scrollTop();

  $('.planeImg').css({'transform' : 'translate(-50%, -'+ wScroll /2 +'%)'})

});


.planeImg {
   position: absolute;
   display: block;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   background: url("../images/plane.png");
   background-size: contain;
   background-repeat: no-repeat;
   z-index: 99;
   height: 80px;
   width: 300px;
}

1 个答案:

答案 0 :(得分:0)

这很有效。

$('.planeImg').css({'transform' : 'translate( -'+ wScroll /2 +'%, -50%)'})