如何实现当前屏图片块随着鼠标上下滚动产生一个上下轻微移动的动效

Question

https://www.oppo.com/cn/produ...
如何实现当前屏图片块随着鼠标上下滚动产生一个上下轻微移动的动效 CSS3 translate3d(x,y,z)，这个动效在苹果、小米、oppo vivo的产品详情页很常见，如图oppo R17页面：

Answer 1

临时写了一个，你看看能不能用

<div id="your-pic-outer-div">
    <img id="your-pic" src="your-pic-source" />
</div>


$(window).scroll(function() {
    var pic_outer_top = $("#your-pic-outer-div").offset().top;
    var pic_outer_h = Number($("#your-pic-outer-div").css("height").replace("px", ""));
    var scrollTop = $(window).scrollTop();
    var offset_Y = (pic_outer_top - scrollTop)/ 2;
    console.log(offset_Y)
    if (pic_outer_top > scrollTop && pic_outer_top < scrollTop + pic_outer_h) {
        setTimeout(function() {
            $("#your-pic").css("transform", "translate3d(0px," + offset_Y + "px,0px)");
        }, 300)
    }
});

Answer 2

视差设计，你都知道是随着鼠标上下滚动，就能想到通过箭头滚动事件，滚到目标元素上时就计算它偏移量了吧。。 原力就那么简单