Question

    <div id="smiley">
        <div id="star">
            <img src="inc/img/heks.png" class="star">
            <img src="inc/img/impo.png" class="star">
            <img src="inc/img/angst.png" class="star">
        </div>
    </div>

    #smiley{
        margin: 50px auto 80px;
        width: 1132px;
        height: 300px;
    }

    #smiley #star{
        display: none;
        float: left;
        height: 300px;
        width: 1132px;
    }

#smiley #star img.star{
    display: block;
    float: left;
    width: 300px;
    margin: 50px 38px 0px;
}

当我向下滚动图像时，我需要让图像淡出。

我希望你能理解这个问题。

此网站模板，http://www.templatemonster.com/demo/51771.html

Answer 1

Demo .. Source code

如果您只想在浏览器窗口中显示图像而不影响其加载..

尝试此操作，使图片隐藏的可见性，然后使用JavaScript将类淡入添加到图像中浏览器..

在 CSS ：

中

所以 ..

<style>
    .star {
        visibility: hidden;
    }

    .fadeIn {
        -webkit-animation: animat_show 0.8s;
        animation: animat_show 0.8s;
        visibility: visible !important;
    }

    @-webkit-keyframes animat_show{
        0%{opacity:0}
        100%{opacity:1}
    }
</style>

然后加载 jQuery 库

<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

并在您的 JavaScript ：

中

<script>
    function showImages(el) {
        var windowHeight = jQuery( window ).height();
        $(el).each(function(){
            var thisPos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
            if (topOfWindow + windowHeight - 200 > thisPos ) {
                $(this).addClass("fadeIn");
            }
        });
    }

    // if the image in the window of browser when the page is loaded, show that image
    $(document).ready(function(){
            showImages('.star');
    });

    // if the image in the window of browser when scrolling the page, show that image
    $(window).scroll(function() {
            showImages('.star');
    });
</script>

希望这会对你有帮助..

Answer 2

查看我对此问题的回答：How to animate this when scrolled

另请查看OP链接到的网站，它可能有一些您感兴趣的动画，并解释了如何制作不同类型的动画

就像其他人所说的那样，确保首先淡化的元素有display: none

当我滚动时，如何使图像淡出可见

2 个答案: