純粋なCSSの視差

この記事では、3DでCSS変換と操作を使用して、純粋なCSSでサイトに視差効果を作成する方法を示します。



Parallaxは、ほとんどの場合JavaScriptを使用して作成され、ほとんどの場合、スクロールイベントでリスナーをハングさせ、DOMを直接変更し、不必要な再描画と置換をトリガーするため、リソースを大量に消費します。 これはすべて、ブラウザーがページをレンダリングするストリームと非同期に発生します。これにより、スクロールが遅くなり、画像がバラバラになります。 より正確な視差実装は、スクロールを追跡し、 requestAnimationFrame



遅延DOM更新を使用しrequestAnimationFrame



。 定性的には異なる結果になりますが、JavaScriptをまったく削除しないのはなぜですか？



視差効果をCSSに転送すると、パフォーマンスの問題や不必要な操作を省くことができ、ハードウェアアクセラレーションによりブラウザがすべてを調整できるようになります。 その結果、ほとんどすべてのリソースを消費するプロセスがブラウザーエンジンによって直接処理されます。 フレームレート（FPS）は安定したままで、画像は滑らかになります。 さらに、視差と他のCSS機能（メディアクエリまたはサポート）をすぐに組み合わせることができます。 応答性視​​差-何？



デモを見る

理論

このメカニズムの動作を理解する前に、必要なマークアップを作成します。

 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ... </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして基本的なスタイル：

 .parallax { perspective: 1px; height: 100vh; overflow-x: hidden; overflow-y: auto; } .parallax__layer { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .parallax__layer--base { transform: translateZ(0); } .parallax__layer--back { transform: translateZ(-1px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべての魔法はparallax



クラスで発生します。 height



およびperspective



スタイルのプロパティを定義すると、中心に要素の遠近法が設定され、固定3Dビューポートが作成されます。 overflow-y: auto



は、要素内のコンテンツを通常にスクロールできるようにしますが、要素の子孫は固定の視点に対して相対的に描画されます。 これは、視差効果を作成するための鍵です。



次に、 parallax__layer



クラス。 名前が示すように、視差効果が適用されるコンテンツレイヤーを定義します。 このクラスを持つ要素は、一般的なコンテンツストリームから切り離され、そのコンテナを満たすように配置されます。



最後に、 parallax__layer--base



およびparallax__layer--back



修飾子クラスがあります。 これらは、視差要素のスクロール速度を調整し、Z軸に沿って移動する（削除するか、ビューポートに近づける）ために必要です。 簡潔にするために、スクロール速度を2つだけにしました。後でさらに追加します。



デモを見る

深度補正

視差効果は3D変換により作成されるため、Z軸に沿った要素の変位には副作用があります。要素の寸法は、ビューポートに近いか遠いかによって変わります。 これを修正するには、要素が元のサイズで描画されるようにscale()



変換を適用する必要があります。

 .parallax__layer--back { transform: translateZ(-1px) scale(2); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スケール係数は、式1 + (translateZ * -1) / perspective)



を使用して計算できます。 たとえば、ビューポートパースペクティブが1px



設定され、Z軸に沿って要素を-2px



シフトすると、 scale(3)



が係数になります。

 .parallax__layer--deep { transform: translateZ(-2px) scale(3); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

調整された深さのデモを見る

レイヤー速度制御

レイヤーの速度は、Zに沿ったパースペクティブ値とオフセット値の組み合わせによって制御されます。Zの負の値を持つ要素は、正の値を持つ要素よりもゆっくりスクロールします。 0からの値の差が大きいほど、視差効果がより顕著になります

（すなわち、 translateZ(-10px)



はtranslateZ(-10px)



よりも遅くスクロールします）。

視差効果のさまざまなセクションを作成する

前の例では、単純なコンテンツを使用する基本的な手法を示しましたが、結局のところ、ほとんどの視差サイトはページを異なる効果を持つ異なるセクションに分割します。 これをメソッドに実装する方法を次に示します。



まず、レイヤーをグループ化するためにparallax__group



要素が必要です。

 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ... </div> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CSSは次のようになります。

 .parallax__group { position: relative; height: 100vh; transform-style: preserve-3d; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この例では、各グループにビューポートを埋めたいので、必要に応じて各グループの数を変えることができますが、 height: 100vh



を設定します。 transform-style: preserve-3d



は、ブラウザーがparallax__layer



で要素を平坦化するのを防ぎますtransform-style: preserve-3d



position: relative



は、 parallax__layer



要素の子をグループに対して配置できるようにします。



覚えておくべき重要なルールは、要素をグループ化するときに、グループ内のコンテンツをトリミングできないことです。parallax__group要素にoverflow: hidden



ているため、視差効果全体が破壊されるためです。 カットされていないコンテンツは、子供たちを超えます したがって、ユーザーがサイトをスクロールするときにコンテンツが正しく非表示になり表示されるように、グループのz-index



値を操作する必要があります。



レイヤーを操作するための厳密な規則はありません。また、異なる方法は異なる実装を意味します。 ただし、レイヤーの配置のデバッグを簡素化するために、グループ要素の単純な変換を適用できます。

 .parallax__group { transform: translate3d(700px, 0, -800px) rotateY(30deg); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次の例を見て、 debug



を見てください！



グループのデモを見る 。

ブラウザのサポート

• Firefox、Safari、Opera、Chromeはすべてこれらの効果をサポートしています。
• Firefoxは動作しますが、わずかな配置の問題があります。
• IEはまだpreserve-3d
  
  
  
  （途中）をサポートしていないため、視差は機能しません。 しかし、これは正常なことです。なぜなら、コンテンツが適切で視差のないように設計する必要があるからです。

記事-翻訳（blog.keithclark.co.ukのオリジナル- 「純粋なCSS視差スクロールWebサイト」 ）