时间戳

首页 > 解决方案 > 当内容在浏览器中可见时触发 Divi 主题提供的内置 javascript 动画

animation - 当内容在浏览器中可见时触发 Divi 主题提供的内置 javascript 动画

问题描述

我使用来自 Elegant Themes 的 Divi 主题构建 WordPress 网站。

这个主题提供了很多可视化模块来构建您的页面，其中一些模块具有内置动画。

例如，圆圈计数器模块显示一个数字，其周围有一个动画圆圈，圆圈的百分比是根据圆圈内显示的数字着色的。

当您滚动页面以及圆形计数器模块在浏览器中可见时播放动画。

我想知道我是否可以使用浏览器开发工具，以及如何了解动画是如何播放的，这样我就可以随时从我自己的脚本中触发它。

我也可以访问主题的源代码，但我不知道如何开始查找我要查找的内容。

Divi 支持人员说“恐怕不支持此功能。它需要进行定制，超出了我们可以在此处提供的支持级别。”，所以这就是我在这里的原因。

标签： animation

解决方案

下面的圆形版本将在页面加载期间更新，但此后仪表不会调整 - 只有数值发生变化。将“newval”传递给进度条将根据需要向上或向下。

$(".et_pb_circle_counter_0").animate({
'data-width': newval
},{
duration: 1000,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_circle_counter_0 .et_pb_circle_counter_inner").attr("data-number-value", newval );
$(".et_pb_circle_counter_0 span.percent-value").html( Math.ceil(now) );
}
});

// Progress Bars
$(".et_pb_counter_0 span.et_pb_counter_amount").animate({
width: newval+"%"
},{
duration: 1500,
specialEasing: {
width: 'linear'
},
step: function (now) {
$(".et_pb_counter_0 span.et_pb_counter_amount").attr("data-width", Math.ceil(now)  + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").attr("data-width", Math.ceil(now) + "%");
$(".et_pb_counter_0 span.et_pb_counter_amount_number").html(Math.ceil(now) + "%");
}

});

推荐阅读