为什么视差滚动在移动设备上不起作用?

视差滚动是一种很棒的效果,可以给您的网站带来独特的外观和感觉。视差滚动允许您的背景移动速度比前景慢。这为访问者在网站上创造了深度和运动的错觉。 

如果您在移动设备上检查,您会注意到您的视差部分不起作用,而是显示静态图像。本文档将帮助您了解发生这种情况的原因以及如何解决它。

视差滚动在移动设备上不起作用

为什么会发生这种情况?

通过将背景图像位置设置为“固定”(background-attachment: fixed),即可创建视差滚动效果。目前只有 Mozilla Firefox 浏览器可以正确支持此固定图像效果(视差)。 

当您在任何触摸设备上使用其他浏览器时,视差滚动将因兼容性原因而被覆盖。因此,您只会看到静态图像,而不是视差。

由于移动浏览器上的视差滚动的响应问题和性能问题,大多数移动浏览器仍然不支持它。 

我们能做什么?

自 3.0.0 版起,Astra 主题附带了 Header Footer Builder。因此,您可以为页眉和页脚添加视差滚动效果,因为 Header Footer Builder 支持此功能。 

让我们向您展示如何激活此选项,例如为您的主要页脚激活此选项:

步骤 1 – 登录您的网站并导航至仪表板 > 页眉生成器 > 主要页脚 > 设计 > 背景

第 2 步– 在这里设置背景图片,然后单击“更多设置”

步骤 3 – 在“附件”下拉菜单下,选择“已修复”选项。单击“发布”以保存更改。

将背景附件设置为“固定”以激活视差滚动

现在您已在桌面上设置了视差效果,您可以为不同的屏幕尺寸添加单独的设置,因为视差滚动在移动设备上不起作用。您可以使用 Astra 的响应式编辑选项来消除视差并为平板电脑和移动设备设计页脚(或页眉)。为此,请继续执行以下步骤:

步骤 4 – 通过单击“背景”选项上的响应式编辑图标切换到平板电脑/移动设备编辑。

响应式编辑 - 为移动设备添加不同的设置

步骤 5 – 编辑平板电脑/手机的背景设置并“发布”

这样,您将能够在桌面屏幕上进行视差滚动,同时在平板电脑和移动设备上拥有精心设计的页眉和页脚部分。

内容怎么样?

您通常会使用页面构建器将内容添加到页面和帖子中。因此,Astra 主题视差设置不会在这里应用。

因此,您可以以类似于 Astra 的 Header Footer Builder 的方式使用页面构建器响应式编辑选项。

不过,在某些页面构建器(Elementor)中,您将无法针对不同的视口分别调整这些设置。在这里,您的视差滚动将自动被静态图像取代。

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容