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

【问题标题】：How to make images fade visible when i'm scrolling当我滚动时如何使图像淡出可见
【发布时间】：2015-01-02 20:10:54
【问题描述】：

    <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

【问题讨论】：

你是说顶部的图像循环在渐变动画中连续几秒后发生变化？？
看看jQuery。用 jQuery 实现并不难。
让我尝试更具体。有 4 个 bobles “硬件”-“网络”-“创新”-“发展” 这些 bobles 从不可见变为可见，然后我滚动，我需要相同的效果
看看我对这个问题的回答：stackoverflow.com/questions/27747983/… 还可以看看 OP 链接到的网站，它可能有一些你会感兴趣的动画，还解释了如何做不同种类的动画动画像其他人说的那样，确保你要先淡入的元素有display: none

标签： javascript html css scroll

【解决方案1】：

Demo..Source code

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

试试这个，将图像的可见性设为隐藏，然后当图像进入浏览器..

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

希望这会对你有所帮助..

【讨论】：