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

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

如果您只想在浏览器 window 中显示图像..而不影响它们的加载..

试试这个，使图像隐藏的 可见性，然后使用 JavaScript 添加 class fadeIn到浏览器window中的图片..

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

希望对您有所帮助..

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

How to make images fade visible when i'm scrolling

html

javascript

css

scroll