Question

是否可以检测用户在页面上滚动的位置以使用纯javascript触发关键帧？

    .animations {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

当用户访问某个页面的某个部分（例如内容部分）时，我希望javascript触发此事件。我不知道从哪里开始

Answer 1

使用javascript，您可以将课程animations添加到mouseenter事件的元素，然后移除mouseleave上的课程。由于你没有提到jQuery，我会使用简单的JS，但如果你打算做一堆DOM操作，我建议使用jQuery，因为它更容易维护。

实施例： http://jsfiddle.net/dirtyd77/z6xmuwse/2/

JAVASCRIPT：

var el = document.getElementById("animation");

el.onmouseenter = function (){
    this.classList.add("animations");
};

el.onmouseleave = function (){
    this.classList.remove("animations");
};

但是，您也可以使用CSS和伪:hover完成此操作。

实施例： http://jsfiddle.net/dirtyd77/z6xmuwse/3/

CSS：

.animations:hover {
    opacity: 0;
    animation: animations-keyframes 2s ease forwards;
    -webkit-animation: animations-keyframes 2s ease forwards;
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
@keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}
@-webkit-keyframes animations-keyframes {
    to {
        opacity: 1;
    }
}

希望这有帮助，如果您有任何问题，请告诉我们！

Answer 2

当滚动到页面的某些部分时，Waypoints可用于触发事件。 http://imakewebthings.com/waypoints/

简单来说，为滚动事件创建事件侦听器 - 向下滚动页面的距离以及元素与页面顶部的距离进行比较。如果用户滚动超出元素（距离滚动＆gt;元素距页面顶部的距离），则会触发事件

当用户滚动到页面的某个部分时，如何触发关键帧

2 个答案: