javascript - 滚动时如何使图像淡出可见

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

如果你想只在图片出现在浏览器窗口时显示图片..而不影响它们的加载..

试试这个，让图像的visibility隐藏，然后当图像出现在浏览器..

所以 .. 在您的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>

希望这对你有帮助..