时间戳

首页 > 解决方案 > 在视口中激活动画

javascript - 在视口中激活动画

问题描述

我正在尝试使用动画使图像从零不透明度过渡到完全不透明度。我使用的关键帧动画代码有效，但我想延迟开始直到图像出现。我试过几个 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;
}

标签： javascripthtmlcss

解决方案

您可以使用 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 标签时，它都会添加淡入淡出类并淡入。

推荐阅读