Question

我正在创建我的测试网页而我遇到了一个问题，在我的问题上有很多“答案”，但我没有能够在我的代码中实现。我知道我必须使用javascript，但我无法使其正常工作。

所以，我需要在所选图片上运行动作的css动画，当我向下滚动它时，该图片在屏幕上可见。基本上就像在这个页面上一样：https://www.photoblog.com/

所以我在html中有这个代码和图片一样：

<img class="movepic" src="pictures/test.jpg">

然后有一个简单的CSS运动代码：

.movepic {
position: relative;
animation-name: move;
animation-duration: 3s;
visibility: visible;
animation-fill-mode: forwards;
z-index:10;
}
@keyframes move {
0% { right:0px; top:150px;}
100% {right:700px; top:150px;}
}

有没有办法使它工作，所以我不需要完全重做这个？或者如果是这样，有些人可以给我一个建议，如何使用代码ilustration。

非常感谢

Answer 1

从您的样式规则中删除animation-name：

.movepic {
    position: relative;
    animation-duration: 3s;
    animation-fill-mode: forwards
    visibility: visible;
    z-index:10;
}

并将此类添加到样式表：

.animation-class {
    animation-name: move
}

现在添加jQuery：

var has_fired;
$("html").on("scroll", function () {
    if (!has_fired && $(this).scrollTop() >= $("#imgContainer").offset().top) {
        $("#imgContainer").addClass("animation-class");
        has_fired = true; // use this if only want fired once
    }
});

动画现在将运行。顺便说一下，我会在您感兴趣的容器中添加一个ID（imgContainer）并将其用作匹配选择器，因为除非.movepic是一个唯一的类，否则此函数将触发具有.movepic类的任何容器（如果.movepic是选择器）

Answer 2

我将此代码用于此效果：

<强> HTML ：

<img class="movepic" src="pictures/test.jpg">

<强> CSS ：

.movepic {
  opacity: 0;
  margin: 25px 0 0;
  color: white;
  padding: 10px;
 }

.FadeIn {
    -webkit-animation: slideIn 0.8s ease 0.3s forwards;
    animation: slideIn 0.8s ease 0.3s forwards;
}

@keyframes slideIn {
    0% {
        -webkit-transform: translateY(40px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0px);
        opacity: 1;
    }
}

<强> JQuery的：

var $fade =  $(".movepic"); //Calling the class in HTML

$(window).scroll(function () { //Using the scroll global variable
    $fade.each(function () {

        fadeMiddle = $(this).offset().top + (0.4 *$(this).height());
        windowBottom = $(window).scrollTop() + $(window).height();

        if (fadeMiddle < windowBottom) {
          $(this).addClass("FadeIn");
        }
    });
});

/* On Load: Trigger Scroll Once*/
$(window).scroll();

在滚动时可见时运行css动画

2 个答案: