CODEWITHSUNDEEP
jqueryscrollfade
Palemo
Palemo

Reputation: 215

Jquery scroll fade between divs

OK, so I have a few divs going down the page, mostly with common CSS of height: 1024px and width:100%. Each of these divs have a full screen background image set using backstretch.

What I want to do is have all the divs hidden at first with only the first one showing - then as you scroll down the page I want each div to fade in with the existing div fading out and visa versa as you scroll back up.

As you can see I have set the existing divs to all height of 1024 so I dont mind if you can see a blank area at the bottom of the screen on higher resolutions.

I have tried using the scrolltop() function but it doesnt work reliably.

Upvotes: 2

Views: 998

Answers (2)

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Try something like below 

<script type="text/javascript">
$(document).ready(function(){
    $(document).scroll(function() {
        var main = Math.min(0.5 + 0.4 * $(this).scrollTop() / 3000, 0.9);
        var change = Math.round(main * 255);
        $("body").css('background-color', 'rgb(' + change + ',' + change + ',' + change+ ')');
    });
});

</script>

For background

var pW = $(this).scrollTop();
$(this).css('background-position', '0% ' + parseInt(-pW / 10) + 'px');

create sprite css image and set image accordingly.

Upvotes: 1

Devang Rathod
Devang Rathod

Reputation: 6726

you can use something like this

$(window).scroll(function() {

    if ($(this).scrollTop()>0)
     {
        $('div1').fadeOut();
     }
    else
     {
        $('div2').fadeIn();
     }
 });

Upvotes: 0

Related Questions