current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

could someone please tell help me with this code?

Basically I have 2 identical images one is shot in daylight where the other one is shot at night, I want it where the light one is the original image and as the page is scrolled down its starts to blend into the darker one.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BG Test</title>

    <script>
    var start = 100 // how far the user has to scroll down before it start fading
    var end = 1200 // the number of pixels the user has to scroll down before the opacity is 0.

    $(document).scroll(function(){
        if(scrollTop>start){
            $('images/MainLight.png').css({'body':(end-scrollTop)/(end-start)});
        }
    });
    </script>
    </head>

    <style type="text/css">
    body{
        background:url(images/MainLight.png) no-repeat center center fixed;
        opacity:100;
        width:100%;
        z-index:-1;

    }

    bgimg{
        background:url(images/MainDark.png) no-repeat center center fixed;
        opacity:100;
        width:100%;
        z-index:0;
    }

    </style>

    <div class="body" >

       Top!
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br                                 /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />        <br /><br /><br /><br /><br /><br /><br /><br />
       Middle!
       <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />        <br /><br /><br /><br /><br /><br /><br /><br />
               <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br         /><br /><br /><br /><br /><br /><br /><br /><br /><br />
       Bottom!

    </div>

    <body>
    </body>
    </html>

Many Thanks in advance.

share|improve this question
    
Maybe this helps jsfiddle.net/WeG8k –  Johan Van den Rym Mar 9 at 19:24
add comment

4 Answers

up vote 1 down vote

Try something as in fiddle: http://jsfiddle.net/z7E9u/1/

I am copying the fiddle js:

var fadeStart=100 // 100px scroll or less will equiv to 1 opacity ,fadeUntil=200 // 200px scroll or more will equiv to 0 opacity ,fading = $('#fading') ;

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop()
        ,opacity=0
    ;
    if( offset<=fadeStart ){
        opacity=1;
    }else if( offset<=fadeUntil ){
        opacity=1-offset/fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});

Hope it helps!

share|improve this answer
add comment
up vote 0 down vote

The issues is that opacity goes from 1 to 0. Just change your css to the following:

body{
    background:url(images/MainLight.png) no-repeat center center fixed;
    opacity:1;
    width:100%;
    z-index:-1;

}

bgimg{
    background:url(images/MainDark.png) no-repeat center center fixed;
    opacity:1;
    width:100%;
    z-index:0;
}
share|improve this answer
    
Thanks, I did but still not working? –  user3195461 Mar 9 at 19:25
    
I'm not really familiar with jQuery, so I'm not exactly sure how to help you further. –  superlizardmo Mar 9 at 19:47
add comment
up vote 0 down vote

For the dark image I would use the class .bgimgDark with a z-index of -20 and for the lighter image use a class of .bgimgLight with a z-index of -10. This allows you to keep your body with a z-index of 0 and all other content will appear in front of the background images.

The light and dark images can then be targeted using the classes.

$(document).scroll(function(){
    if(scrollTop>start){
        $('.bgimgLight').css({'opacity':(end-scrollTop)/(end-start)});
    }
});
share|improve this answer
add comment
up vote 0 down vote

Okay I used -webkit-mask for this. Try this FIddle

.child-2 {
    -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.45, #000), color-stop(0.55, transparent));
    -webkit-mask-size:220%;
    -webkit-mask-position-y:0%;
}

var child2 = $('.child-2'),
    lastScrollTop = 0;
$(window).scroll(function (event) {
    var st = $(this).scrollTop(),
        pos = parseInt(child2.css("-webkit-mask-position-y").replace('%', ''));
    if (st > lastScrollTop) {
        pos += 3;
    } else {
        pos -= 3;
    }
    lastScrollTop = st;
    if (!(pos<0) || !(pos>100)) {
        child2.css("-webkit-mask-position-y", pos + "%");
    }
});//Rest of the code is in the fiddle.

It is still buggy but it's only a rough idea.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.