html - 在滚动条上可见时运行 css 动画

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;}
}

有没有办法让它工作，这样我就不需要完全重做这个？或者，如果是这样，能否请一些人给我建议如何使用代码插图来做到这一点。

非常感谢

Answer 1

我使用这段代码来实现这种效果:

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();