我正在使用视差开发一个网站。关于我到目前为止做了什么的简短说明。 我使用skrollr插件生成视差效果。有了这个插件，我成功地能够以不同的滚动速度移动元素。但是，我真的要解决一些重大问题。
鉴于您的理解和指导，我期待着通过它们。
以下是我要解决的问题：
1）我开发的网站没有视差响应。元素的数据属性是内联编写的（这就是到目前为止我认为它们是如何编写的：内联）。因此，即使在屏幕上调整大小，数据属性的内联样式仍然保持不变。因此，用于视差的响应式内容（在桌面版上）无法在移动版本上产生相同的效果。
2）我检查了索尼网站。链接：http://www.sony.com/be-moved/ 他们使用了视差，网站响应迅速。 视差网站更多地基于图像内容。那么，当图像尺寸很大时，网站如何加载速度更快。 （跑进MB）。索尼网站有很重的图像（大小运行到MB）。如此沉重的尺寸图像加载得如此之快？
3）再次回到索尼网站。在滚动时，向用户显示索尼产品的各种视角/角度。那么，如何为滚动捕获每个产品的多个视角。 对于卷轴上显示的每个产品，这种精确的连续图像如何具有不同的视角？ 它改变了视角的整个背景图像。那么，这是怎么做到的？那不仅仅是普通的视差，对吗？ 我提到这个网站是因为它以与其他简单视差网站不同的方式实现。索尼的实施是我感兴趣的！
4）最好做什么？在滚动上更改背景图像（就像在sony上完成的方式）或使用数据属性更改单个元素的位置？ （就像在www.numero10.ch上完成的那样） 我被要求以两种方式实现视差： a）仅在背景中移动元素。就像它的天空图像右边有两个云。然后只考虑在滚动时将两个云移动到左侧。 要么 b）具有不同的背景图像，右侧两个云向左移动。所以，这意味着我将有一连串的图像，只是从右到左移动云;每个图像都有两个云向左移动像素位置。
期待回复。 :)
感谢您的患者阅读。
答案 0 :(得分：1)
我认为这将引导您走向正确的方向：https://ihatetomatoes.net/sonys-be-moved-website-deconstructed/
详细解释了Be Moved网站的构建方式。
答案 1 :(得分：0)
2）我相信他们使用了一种名为“Lazy Loading”的东西，它会显示一个“虚假”的浅色图像，直到加载所有的HTML，CSS，JS然后加载真实图像并替换它们。
3）那不仅仅是视差，他们正在使用canvas元素（我究竟怎么知道但是检查页面源代码）
4）最好将图像保留为固定背景，并使用较小的元素。
答案 2 :(得分：0)
我认为该网站不仅仅是视差分层滚动，它是滚动时触发的一系列视频剪辑的组合。我没有检查网站的元素，但我想是的。但是，与其他此类网站相比，网站的加载速度非常快，因为您的系统中存在缓存，并且最终在较重图像中实现较轻的图像