javascript - 当元素在屏幕中占 60% 时，WOW.js 开始动画

Question

使用 WOW.js，是否可以在元素的 X% 可见时启动动画而不是使用偏移值？

例如，我有一个宽度和高度为 300 像素的元素，如果我将 X% 设置为 50%，当用户滚动到屏幕上有 150 像素的元素时，动画将开始。

Answer 1

我查看了 WOW.js 的源代码，似乎没有办法将偏移量指定为百分比而不是像素。下面是如何在 javascript 中执行此操作:

window.onload = function() {
    var elements = document.getElementsByClassName("offsetme50");
    var i;
    for (i = 0; i < elements.length; i++) {
        var offset = elements[i].clientHeight * .5;   //.5 = 50%
        elements[i].setAttribute("data-wow-offset", offset);
    }
}

此代码将在页面加载后自动运行。将 class="offsetme50" 设置为您想要的所有 HTML 元素。