在Scroll JavaScript库上缩放和移动背景图像

Question

我注意到有几个网站有背景图像，可以根据滚动缩小，缩小和移动。我熟悉视差滚动，但这似乎有点不同，因为背景图像实际上并没有改变。

我的意思的一些例子（这些中也有一些视差）是flatvsrealism和DiscoverLab。 Flatvsrealism特别是在它转向现实生活的最后。

由于我确信这样做太复杂了，我想知道是否有任何JavaScript库可以工作。我熟悉ScrollMagic，但看起来它的功能似乎并没有延伸到这一点。

Answer 1

为此，您需要使视差滚动修改背景图像的大小以及其位置。为此，请在Javascript：

中设置视差滚动元素的background属性

[your parallax object].style.background= "color image repeat attachment position size";

注意：颜色是十六进制代码或rgba（图像是网址，重复是你想要背景重复，附件是＆＃34;滚动＆＃34;，位置是将成为您背景图片的位置，尺寸将为＆＃34; xpx ypx＆＃34;

此代码将转到滚动的位置。它将取代设置背景图像位置的代码;这将使用＆＃34; background＆＃34;的复合属性。您需要将大小设置为访问者向下滚动页面的距离。

具体代码取决于您的库以及如何实现视差滚动。

如果您正在寻找视差库，我建议您在jQuery中编写自己的视差函数。这样您就可以修改功能以更改背景大小。有一个jQuery parallax tutorials here的完整列表。