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

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

演示 .. 源代码

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

试试这个,隐藏图像的可见性,然后当它变成浏览器的窗口时,使用JavaScript将类fadeIn添加到图像中.

那么 ......在你的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>

希望对你有帮助 ..