在視口中激活 animation

Question

我正在嘗試使用動畫使圖像從零不透明度過渡到完全不透明度。 我使用的關鍵幀 animation 代碼有效，但我想延遲開始直到圖像出現。 我試過幾個 JS 代碼都沒有用。

HTML

<div class="item2">
 <img src="images/winston-chen-qg8TGmBNdeY-unsplash.jpg" width="950" height="700" alt="wintson cheng unsplash" class="img">                     
</div>

CSS

@keyframes animate {
 from {opacity: 0;}
 to {opacity: 1;}
}

.img {
 width: 100vw;
 height: auto;
 animation-name: animate;
 animation-duration: 10s;
 animation-timing-function: ease-in;
}

Answer 1

您可以使用 jQuery 輕松完成。

CSS：

img { opacity: 0; } /* this sets the opacity before it comes in so there isn't a jump */

.img {
     width: 100vw;
     height: auto;
}

.fadein {
     animation: animate 10s forwards;
}

jQuery：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

然后在腳本文件中：

    $(function() {
      $(window).scroll(function() {
        var $img = $(".img");
        $img.each(function() {
            var $y = $(document).scrollTop(),
            $wh = $(window).height(),
            $t = $(this).offset().top - $wh;
            if ($y > $t) {
                $(this).addClass("fadein");
            }
        });
    });
});

每次看到 .img 標簽時，它都會添加淡入 class 並淡入。