視差縮小效果問題

Question

我正在試驗視差並試圖在滾動上獲得一個很好的縮小，但我正在努力與圖像變得比瀏覽器寬度和div的高度更小。

正如你在我的例子中看到的那樣，當你向下滾動時，包裝部分的紅色背景是可見的。

您可以查看例如在www.adamkhourydesign.com/test

HTML

<header id="header_container"> 
    <div class="header_back"></div> 
    <div class="logo"></div> 
</header> 

CSS

#header_container { 
    position: relative; 
    height: 600px; 
    background-color: rgba(255, 100, 85, 0.5); 
    background-repeat: no-repeat; 
    background-size: auto 800px; 
    background-position: top center; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.logo { 
    height: 100px; 
    width: 100%; 
    background-image: url(../img/name.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

.header_back { 
    position: relative; 
    height: 600px; 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: top center; 
    background-attachment: fixed; 
    background-image: url(../img/header_bg.jpg); 
    overflow: hidden; 
} 

jQuery的

var pContainerHeight = $('#header_container').height(); 

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 
    var wZoomIn = 1+(wScroll*.0005); 
    var wZoomOut = 1-(wScroll*.00005); 

    if (wScroll <= pContainerHeight) { 
    $('.header_back').css({ 
     'transform' : 'scale('+ wZoomOut +')' 
    }); 
    $('.logo').css({ 
     'transform' : 'translate(0px, '+ wScroll /0.7 +'%)' 
    }); 
    } 

Answer 1

感謝阿內爾天平，你貼我的答案設法稍微調整我的代碼以使其工作。

我將背景圖像移出Background屬性，並將其添加爲div內的圖像。然後在CSS中，我製作了例如140％寬度和高度的圖像。並最終抵消在這種情況下超過100％的左邊餘額的一半-20％。

代碼現在看起來是這樣的：

HTML

<header id="header_container"> 
      <div class="header_back"> 
       <img src="img/header_bg.jpg"> 
      </div> 
      <div class="logo"></div> 
    </header> 

JQUERY

var pContainerHeight = $('#header_container').height(); 

$(window).scroll(function(){ 

    var wScroll = $(this).scrollTop(); 
    var wZoomIn = 1+(wScroll*.0005); 
    var wZoomOut = 1-(wScroll*.0005); 

    if (wScroll <= pContainerHeight) { 
    $('.header_back img').css({ 
     'transform' : 'scale('+ wZoomOut +')' 
    }); 
    $('.logo').css({ 
     'transform' : 'translate(0px, '+ wScroll /0.7 +'%)' 
    }); 
    } 

CSS

#header_container { 
    position: relative; 
    height: 600px; 
    width: 100%; 
    background-color: rgba(255, 100, 85, 0.5); 
    background-repeat: no-repeat; 
    background-size: auto 800px; 
    background-position: top center; 
    background-attachment: fixed; 
    overflow: hidden; 
} 

.logo { 
    height: 100px; 
    width: 100%; 
    background-image: url(../img/name.png); 
    background-position: center; 
    background-repeat: no-repeat; 
    position: absolute; 
    top: 50%; 
    margin-top: -50px; 
} 

.header_back { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    background-repeat: no-repeat; 
    background-size: 100%; 
    background-position: top center; 
    background-attachment: fixed; 
    background-color: rgba(154, 100, 85, 0.5); 
    text-align: center; 
    overflow: hidden; 
} 
.header_back img { 
    height: auto; 
    width: 140%; 
    margin-left: -20%; 
} 

Answer 2

修改你的代碼，我能夠得到一個smo其他視差縮小滾動，但使用background-size屬性而不是transform: scale()。我通過最初縮放背景圖像（例如105%），然後在向下滾動時逐漸縮小到100%。我還確保background-size不會低於100%，因此它始終覆蓋整個標題區域。

CSS

... 
.header__back { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: url("http://www.adamkhourydesign.com/test/img/header_bg.jpg") top center no-repeat fixed; 
    background-size: 105%; /** the initial zoom **/ 
    overflow: hidden; 
} 
... 

的Javascript

var height = $('#header_container').height(); 
var logo = $('.logo'); 
var background = $('.header__back'); 

$(window).on('scroll', function() { 
    var scroll = $(this).scrollTop(); 

    logo.css('transform', 'translateY(' + scroll/0.7 + '%)'); 

    var backgroundSize = 105 - (5 - (height - scroll)/height * 5); 
    backgroundSize = backgroundSize < 100 ? 100 : backgroundSize; 
    background.css('background-size', backgroundSize + '%'); 
}); 

看看這個小提琴看到它在行動：parallax zoom out demo