Using HTML/CSS/JavaScript to control image opacity

Question

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.

Maybe this helps jsfiddle.net/WeG8k

JohanVdR
– JohanVdR

2014-03-09 19:24:47 +00:00
Commented Mar 9, 2014 at 19:24 — JohanVdR
– JohanVdR, Commented Mar 9, 2014 at 19:24

Amar · Accepted Answer · 2014-03-09 19:25:44Z

1

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!

answered Mar 9, 2014 at 19:25

Amar

2,2731 gold badge16 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1710796 · Accepted Answer · 2014-03-09 19:22:54Z

0

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

answered Mar 9, 2014 at 19:22

user1710796

1 Comment

user1710796 Over a year ago

I'm not really familiar with jQuery, so I'm not exactly sure how to help you further.

Lokesh Suthar · Accepted Answer · 2014-03-09 20:58:47Z

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.

Collectives™ on Stack Overflow

Using HTML/CSS/JavaScript to control image opacity

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related