javascript - 视差实现指南像索尼网站

Question

我正在开发一个使用视差的网站。只是简要说明我到目前为止所做的事情。我使用 skrollr 插件来生成视差效果。使用这个插件，我可以成功地移动具有不同滚动速度的元素。但是，我确实有几个主要问题需要解决。

鉴于您的理解和指导，我期待通过它们。

这是我要解决的问题:

1) 我开发的网站没有视差响应。元素的数据属性是内联编写的(到目前为止，我认为它们是这样编写的:内联)。因此，即使在屏幕调整大小时，数据属性的内联样式也保持不变。因此，视差的响应式内容(在桌面版上)无法在移动版上产生相同的效果。

2) 我查看了索尼网站。链接:http://www.sony.com/be-moved/他们使用了视差并且网站响应迅速。视差网站更多地基于图像内容。那么，当图像尺寸很大时，网站如何加载得更快。 (遇到 MB)。索尼网站有非常大的图像(大小达到 MB)。这么大的图片怎么加载这么快？

3) 再次回到索尼网站。在滚动时，用户会看到索尼产品的各种视角/Angular 。那么，如何为滚动捕获每个产品的多个视角。如此精确的顺序图像是如何在滚动上显示每个产品的不同视角的？它是改变视角的整个背景图像。那么，这是怎么做到的呢？那不仅仅是普通的视差，对吧？我提到这个网站是因为它的实现方式与其他简单的视差网站不同。索尼的实现是我感兴趣的!

4) 最好做什么？在滚动条上更改背景图像(就像它在索尼上所做的那样)或使用数据属性更改单个元素的位置？ (就像它在 www.numero10.ch 上所做的那样)我被要求以两种方式实现视差:a) 只移动背景内的元素。就像它是右边有两朵云的天空图像。然后考虑将两朵云移到滚动条的左侧。或者b) 有不同的背景图像，右边的两朵云向左移动。所以，这意味着我将获得一连串的图像，用于将云从右移动到左；每个图像都有两个云向左移动像素位置。

期待回复。 :)

感谢您的耐心阅读。

Answer 1

我认为这会引导您走向正确的方向:https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/

它详细解释了 Be Moved 网站是如何构建的。