How to make images fade visible when i'm scrolling

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;
}

I need have the images to fade visible when i'm scrolling down to them.

i hope you understand the question.

• This website template, does it http://www.templatemonster.com/demo/51771.html

Answer 1

Demo .. Source code

If you want to show the images only when they become in the window of browser.. without affecting their loading ..

Try this, make the visibility of image hidden, then using JavaScript add class fadeIn to the image when it become in the window of browser ..

So .. in your 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>

Then load jQuery library

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

and in your 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>

Hope this will help you ..