2

私は視差スクロールを使用しており、現在、背景画像が通常のコンテンツスクロール速度の 50% でスクロールするように設定しています。こちらをご覧ください: www.jurbs.com . (コンテンツは Chrome と Opera で最適化されています)

理想的には、画像にスクロールがまったくないことを望んでいますが、コンテンツがスクロールすると、それに応じて画像の表示がスライドして進行します。この例は、 www.tooyungtowed.orgで見ることができます。

関連する 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;
    }

そして、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');
}

}
4

2 に答える 2

7

画像ごとにラッパー div を使用し、画像自体ではなく、div で視差を使用する必要があると思います。ここでhttp://teamideas.ptを確認してください。視差効果のためにstellar.jsを使用して構築したウェブサイトです。

于 2013-01-10T15:11:12.860 に答える