Elementor - 滚动“运动效果”在调整窗口大小之前不起作用

Posted 2023-03-05

【中文标题】Elementor - 滚动“运动效果”在调整窗口大小之前不起作用

【英文标题】：Elementor - Scrolling "motion-effects" not working until window resized

【发布时间】：2019-11-20 14:56:05

【问题描述】：

我对某些图像有滚动效果，一些放大，使用水平、垂直滚动和其他一些效果。除非发生以下两种情况之一，否则滚动动作不会被初始化： 1) 调整浏览器窗口的大小（宽度或高度）。 2）您再次访问该页面或它已刷新。这发生在所有浏览器中。

编辑：一些滚动效果似乎已初始化，但在它进入视口之前触发（因此你看不到它）。

示例视频：

如何复制：https://www.youtube.com/watch?v=U9vlteH691U 示例 1：https://www.youtube.com/watch?v=a9YGIkgRF_Q 示例 2：https://www.youtube.com/watch?v=JgSKObKfVOU

注意：如果您希望多次复制问题，则必须访问带有隐身页面的页面。如果它再次开始工作，请尝试使用新浏览器或新标签。

影响滚动的页面 URL（大多数部分位于“网页设计”下）：

https://rory-dwyer.com/hk-electrical-engineers/ - 笔记本电脑、手机和网站截图部分

https://rory-dwyer.com/simpliii/ - 在品牌元素和视频之间

https://rory-dwyer.com/bridge-city-ballroom-dance/ - 手机入口动画、网站截图

https://rory-dwyer.com/jgarloff-design/ - 电脑、手机和网站截图

https://rory-dwyer.com/apo11o/ - 网页设计下的手机

我尝试过的事情：

禁用所有插件 使用股票主题 禁用页眉和页脚脚本注入 删除 Elementor 导航和页脚部分 搜索和替换 http -> https 从头开始重建页面（使用 Elementor 制作的页面模板） 回滚 Elementor 版本 在实时服务器（从头开始）而不是本地环境上从头开始重建站点 禁用所有全局模板 删除所有自定义 CSS 和 JS

【问题讨论】：

我也有同样的问题，但在我的情况下，它不适用于元素的 gallery 元素，否则运动效果可以正常工作，我认为它与画廊或其中一些 css 有问题，我在一些与此相关的 wordpress 问题中有红色，有人告诉它是由于外部或内部边距/填充而发生的。

我也遇到了同样的问题...在文本 div 上启用了运动效果。加载时某些元素不会显示，除非您调整浏览器的大小。我试图将效果设置为无，但似乎它一直在应用效果。

【参考方案1】：

转到 Jetpack 插件中的 Jetpack 设置。转到性能选项卡。向下滚动页面并禁用“延迟加载”

Image of disabled "lazy loading" in the Jetpack plugin.

【参考方案2】：

有这个问题的朋友可以试试这个。

如果您使用的是 Windows 10。可能您关闭了show animations on windows。 在 Windows 10 中通过设置 display settings 将其打开。

【参考方案3】：

找到你 Elementor 的 css 文件 frontend.min.css 并删除这部分 css：

@media (prefers-reduced-motion:reduce) 
    .animated 
        -webkit-animation: none;
        animation: none
    

这部分 css 告诉浏览器在操作系统更喜欢减少运动时禁用动画，因此删除这部分 css 将强制动画在所有操作系统上显示。如果您想保留这部分 css 并希望在某些 PC 上显示它，那么您可以在该 PC 上的设置中打开动画 - 要在 Windows 10 上打开动画，请转到设置 > 轻松访问 > 显示 > 简化和个性化 Windows，然后打开在 Windows 中显示动画。