視差的背景位置：無跳

中心中心我想不出解決的自己守着幾十後的辦法視差的背景位置：無跳

#banner .slide { 
    position: static; 
    top: 0px; 
    left: 0px; 
    z-index: 99; 
    opacity: 1; 
    display: block; 
    visibility: hidden; 
    background-image: url(http://wp-content/uploads/2260-000-01.jpg); 
} 


#banner .slide { 
    background-attachment: inherit; 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: cover; 
    position: relative; 
}

背景圖像定位center center，你可以看到，這是故意說background-attachement不是fixed（因爲它總是與蓋導致圖像的狹窄視圖結合）。

爲了達到所需的視差，我使用這個片段。

$(window).on('scroll', function(e) { 
     $('#banner .slide').css('background-position', 'center ' + $(window).scrollTop()*0.4 + 'px') 
    })

我有問題當然是初始滾動（在scrollTop的第一個變化），導致圖像的跳躍，因爲當然JS不知道是什麼意思center我。

所以我的目標是保持圖像的位置center center，因爲我想要始終看到圖像的垂直和水平中心。

你知道任何技巧或想法，我怎麼能告訴JS圖像的當前垂直中心，所以視差計算會從這點開始，而不是從0

感謝開始，馬特

來源

2017-10-08 matt

我建議通過改變幻燈片的轉換值來採取稍微不同的方法。

const parallaxables = document.querySelectorAll('.parallax'); 
 

 
function runParallaxLoop() { 
 
    requestAnimationFrame(runParallaxLoop); 
 
    parallax(); 
 
} 
 

 
function parallax() { 
 
    parallaxables.forEach(parallaxable => { 
 
     let distance = window.scrollY * 0.5; 
 
     parallaxable.style.transform = `translate3d(0,-${distance}px, 0)`; 
 
    }); 
 
} 
 

 
runParallaxLoop();

.parallax { 
 
    width: 100vw; 
 
    height: 500px; 
 
    margin-bottom: 400px; 
 
    background: url(http://lorempixel.com/1200/800/sports/) no-repeat center center; 
 
    background-attachment: fixed; 
 
}

<div class="parallax"></div>

每一幀，就轉換需要由速度的一定比例與該瀏覽器被滾動被parallaxed的元素。

爲了達到此目的，您需要修復可用於視差的元素的背景附件。

來源

2017-10-08 07:57:43 Prashant

有沒有辦法使這項工作沒有固定的背景附件？ – matt

如果您可以使用固定在幻燈片上的位置，那會更好。與translate3d瀏覽器一起將能夠非常便宜地執行動畫，而不必涉及主線程。 – Prashant

視差的背景位置：無跳

回答

相關問題