当元素在屏幕上显示60％时，WOW.js开始动画

Question

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

例如我有一个宽度和高度为300px的元素，并且如果将X％设置为50％，则当用户滚动到足以在屏幕上显示150px的元素时，动画将启动。

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元素。