Question

I’m working with parallax scrolling and currently have a setup such that my background images scroll at 50% of normal content scrolling speed. See here: http://www.jurbs.com. (Content is optimized in Chrome and Opera)

Ideally, what I would like is for there to be no scroll in the images at all, but as the content scrolls, the image visibility slides and progresses accordingly. Examples of this can be seen here: http://www.tooyoungtowed.org.

Here is the relevant CSS:

#content {
z-index: 4;
position: relative;
max-width: 940px;
padding: 0 10px;
margin: 0 auto;
line-height: 1.7;
}
#content article {
    width: 300px;
    }
    #firstbox ,
    #secondbox,
    #thirdbox,
    #fourthbox {
        padding-top: 105px;
        }
    #firstbox {
        position: absolute;
        top: 0px;
        left: 730px;
        }
    #secondbox {
        position: absolute;
        top: 2120px;
        left: 730px;
        }
    #thirdbox {
        position: absolute;
        top: 4240px;
        left: 730px;
        }
        #content h1 {
            margin: 0 0 25px 0;
            font-size: 60px;
            font-family: Helvetica, sans-serif;
            font-weight: bold;
            line-height: 65px;
            }
    #fourthbox {
        position: absolute;
        top: 6360px;
        left: 730px;
        }
        p.whitetext{
            color:#fff;
            }
#parallax-bg3 {
z-index: 3;
position: fixed;
top: 0;
left: 50%;
height: 1080px;
width: 100%;
max-width: 1920px;
margin-left: -960px;
}
#bg3-1 {
    position: absolute;
    top: 0px;
    }
#bg3-2 {
    position: absolute;
    top: 1060px;
    }
#bg3-3 {
    position: absolute;
    top: 2120px;
    }
#bg3-4 {
    position: absolute;
    top: 3180px;
    }

And parallax.js:

$(document).ready(function() {

redrawDotNav();

/* Scroll event handler */
$(window).bind('scroll',function(e){
    parallaxScroll();
    redrawDotNav();
});

/* Next/prev and primary nav btn click handlers */
$('a.firstbox').click(function(){
    $('html, body').animate({
        scrollTop:0
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.secondbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#secondbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.thirdbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#thirdbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});
$('a.fourthbox').click(function(){
    $('html, body').animate({
        scrollTop:$('#fourthbox').offset().top
    }, 1000, function() {
        parallaxScroll(); // Callback is required for iOS
    });
    return false;
});

/* Show/hide dot lav labels on hover */
$('nav#primary a').hover(
    function () {
        $(this).prev('h1').show();
    },
    function () {
        $(this).prev('h1').hide();
    }
);

});

/* Scroll the background layers */
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.5))+'px');
}

/* Set navigation dots to an active state as the user scrolls */
function redrawDotNav(){
var section1Top =  0;
// The top of each section is offset by half the distance to the previous section.
var section2Top =  $('#secondbox').offset().top - (($('#thirdbox').offset().top - $('#secondbox').offset().top) / 2);
var section3Top =  $('#thirdbox').offset().top - (($('#fourthbox').offset().top - $('#thirdbox').offset().top) / 2);
var section4Top =  $('#fourthbox').offset().top - (($(document).height() - $('#fourthbox').offset().top) / 2);;
$('nav#primary a').removeClass('active');
if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
    $('nav#primary a.firstbox').addClass('active');
} else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
    $('nav#primary a.secondbox').addClass('active');
} else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
    $('nav#primary a.thirdbox').addClass('active');
} else if ($(document).scrollTop() >= section4Top){
    $('nav#primary a.fourthbox').addClass('active');
}

}

Answer 1

I think you need to use a wrapper div for each image, and use the parallax on the div, not the image itself. Check here http://teamideas.pt, it´s a website I’ve built using stellar.js for the parallax effect.