CODEWITHSUNDEEP
jquery
billylevin
billylevin

Reputation: 92

jQuery - Image starts off invisible then fades in when user scrolls

I'm very close to achieving an effect that I want, I just have one obstacle left that I don't know how to solve.

Basically, I want to start off with an image (that says "a new era of hosting), then, as the user scrolls, that image fades out, and a new one fades in, saying "tired of hosting with kids?"

I'm very close to achieving this effect. The only problem is, as the page loads, both of the images are visible, and the second one then disappears as you begin scrolling. How do I make it so that the second image isn't visible when the page loads?

Here is my jQuery code, which I was given from another question. Please note I haven't learnt jQuery yet, and so the way I have edited it may be amateurish or flat out wrong. 

$(document).ready(function () {
    var subsection2Top = $('.sub-section2').offset().top;

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsection2Top + 500 < y) {
            $('.sub-section2').fadeTo(100, 1);
        } else {
            $('.sub-section2').fadeTo(100, 0);
        }
    });
});

$(document).ready(function () {
    var subsectionTop = $('.sub-section').offset().top;

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsectionTop + 300 < y) {
            $('.sub-section').fadeTo(100, 0);
        } else {
            $('.sub-section').fadeTo(100, 1);
        }
    });
});

Also, here is a JSfiddle of all of my code.

Thank you in advance!

Upvotes: 1

Views: 235

Answers (4)

Moti Korets
Moti Korets

Reputation: 3748

Add this to ready function.

$('.sub-section2').hide();

Also i didn't get why you have two ready functions you could just write it once like this.

$(document).ready(function () {
var subsection2Top = $('.sub-section2').offset().top;
var subsectionTop = $('.sub-section').offset().top;
$('.sub-section2').hide();
$(window).scroll(function () {
    var y = $(window).scrollTop();
    if (subsection2Top + 500 < y) {
        $('.sub-section2').fadeTo(100, 1);
    } else {
        $('.sub-section2').fadeTo(100, 0);
    }
    if (subsectionTop + 300 < y) {
        $('.sub-section').fadeTo(100, 0);
    } else {
        $('.sub-section').fadeTo(100, 1);
    }
});
});

Upvotes: 2

codescribblr
codescribblr

Reputation: 1176

Quick fix: add this code just below the first document.ready call:

$(".sub-section2").css('opacity',0);

But I agree that you should really do this in your css file. jQuery just makes it easy to do cross-browser compatible css.

Upvotes: 2

abc123
abc123

Reputation: 18763

DEMO: jsFiddle

Change:

<section id="section-two" class="sub-section2" style="display: none;">

HTML:

<body>
    <section id="section-one" class="sub-section">
        <article class="text-image">
            <img src="http://i.imgur.com/c11oOSv.png" />
        </article>
    </section>
    <section id="section-two" class="sub-section2" style="display: none;">
        <article class="text-image">
            <img src="http://i.imgur.com/HHxgCJH.png" />
        </article>
    </section>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
    <p>Text so I can scroll</p>
</body>

JS:

$(document).ready(function () {
    var subsection2Top = $('.sub-section2').offset().top;
    var subsectionTop = $('.sub-section').offset().top;

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsection2Top + 500 < y) {
            $('.sub-section2').fadeTo(100, 1);
        } else {
            $('.sub-section2').fadeTo(100, 0);
        }
    });

    $(window).scroll(function () {
        var y = $(window).scrollTop();
        if (subsectionTop + 300 < y) {
            $('.sub-section').fadeTo(100, 0);
        } else {
            $('.sub-section').fadeTo(100, 1);
        }
    });
});

Upvotes: 0

Raidri
Raidri

Reputation: 17550

For the second image use:

   <img src="http://i.imgur.com/HHxgCJH.png" style="display: none;"/>

Upvotes: 0

Related Questions