如何使用平滑视差实现y轴视差滚动

Question

我想实现视差滚动效果，比如在https://findmymanandvan.co.uk/man-with-a-van/london.我正在使用https://github.com/diegoversiani/smooth-parallax但似乎不能使图像在x轴上移动，即它们从侧面进入，而不是在y轴上上上下移动？我是javascript的新手，我确信我错过了一些简单的东西。谢谢

我为图像尝试的代码是

<img src="https://res.cloudinary.com/find-my-man-and-van/image/upload/c_scale,q_50,w_1600/v1653118079/parallax/clouds.webp" alt="clouds" smooth-parallax end-position-y="0.15" id="sky">
<img src="https://res.cloudinary.com/find-my-man-and-van/image/upload/c_scale,q_auto:good,w_800/v1652954804/parallax/bground-layer-4-01.webp" alt="mountains" smooth-parallax end-position-y="0.05"
id="mountainsLayer">
<img src="https://res.cloudinary.com/find-my-man-and-van/image/upload/c_scale,q_auto:good,w_1000/v1652954804/parallax/bground-layer-3-01.webp" alt="city" smooth-parallax end-position-y="0.25"
id="backLayer">

使用平滑视差库中不变的javascript

<script type="text/javascript">
window.addEventListener("load", function () {
SmoothParallax.init();
});
</script>

Answer 1

这4个参数，加上开始移动和结束移动，将使您指定的图像在页面滚动时移动：

start-position-x - define the horizontal start position of the element in percentage of its the base-size (see option below).
start-position-y - define the vertical start position of the element in percentage of its the base-size (see option below).
end-position-x - define the horizontal end position of the element in percentage of its the base-size (see option below).
end-position-y - define the vertical end position of the element in percentage of its the base-size (see option below).