当元素在屏幕中为60%时,WOW.js开始动画

时间:2015-04-01 00:11:09

标签: javascript css3

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

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

1 个答案:

答案 0 :(得分:0)

我查看了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元素。