バックグラウンド固定の代替案

Question

私はちょうど同じページに2つのヒーローイメージセクションがあり、それらにbackground-attachement: fixedを使用しなければならないという問題がありました。ほとんどのブラウザ（IEを見て）でスクロールが非常に遅いと言う必要はありません。だからパフォーマンスはあまり良くありません。ああ、このサイトにはスムーススクロール（使用する：nicescroll.jsこれの）いくつかの視差スクロールされた要素（stellar.js） があります。私はできるだけ画像を小さくして、background-size: cover（再びパフォーマンス）を使わないようにしてください。 ああ、私のcore.jsファイルにはwindow.requestAnimationFrame()が使われています（もう一度パフォーマンスがあります）。

この2つのヒーローセクションイメージをbackground-image: fixedのように動作させる方法はありますか？

index.htmlを

<div class="first-hero"> 

</div> 
<div class="content"> 
    . 
    . 
    lots of parallax content goes here 
    . 
    . 
</div> 
<div class="second-hero"> 

</div> 

style.cssに2番目のヒーローのCSS文で

.first-hero{ 
    background: transparent url('image1.jpg') no-repeat; 
    background-attachment: fixed; 
    height:400px; 
    width:100vw; 
} 
.second-hero{ 
    background: transparent url('image2.jpg') no-repeat; 
    background-attachment: fixed; 
    height:350px; 
    width:100vw; 
} 
.content{ 
    width:100vw; 
    height:2500px; 
} 

Answer 1

歴史を、background-attachment:fixed;が持っていますパフォーマンスの問題を抱えていました。代わりに、代わりにposition:fixed;要素が使用されることをお勧めします。

transform:translateZ(0);を使用すると、固定背景とスクロール可能なコンテンツセクションをGPUの独自のレイヤーに置くことができます。これにより、パフォーマンスがさらに向上します。

フィドル：https://jsfiddle.net/gstnr9w5/1/

.fixed-background{ 
    position:fixed; 
    left:0; 
    top:0; 
    right:0; 
    bottom:0; 
    background:url(https://unsplash.it/1000/1000?image=1080); 
    background-size:cover; 
    background-position:center center; 
    z-index:0; 
} 

.content{ position:relative; z-index:1; color:white; font-size:22px; line-height:32px; font:serif; padding:80px; } 


.fixed-background, .content{ 
    transform:translateZ(0); 
    -webkit-transform:translateZ(0); 
    -moz-transform:translateZ(0); 
} 

Answer 2

以下試してください。

.second-hero{ 
    background: transparent url('image2.jpg') no-repeat; 
    background-attachment: fixed bottom; 
    height:350px; 
    width:100vw; 
}