「Hero Image」-視差バナー

CSS 3Dトランスフォームを使用すると、無限の可能性が広がります。 しかし、力には責任が伴います。 CSSの3次元の利点を最大限に活用できる状況が発生します。 ただし、ほとんどのプロジェクトでは、わずかな装飾しかできません。



今日の宝物は人気を集めており、3Dトランスフォームによって作成された効果です。 このため、z軸にいくつかの画像を配置し、その後マウスを誤った3次元カメラとして使用して、マウスカーソルが移動すると視点が変わるようにしました。 実際、この場合、マウスの位置に応じて3次元空間で画像を回転させます。



デモ



この効果はマウスの動きに依存するため、モバイルデバイスでは表示されません。



この顕著な効果は、 SquarespaceやHelloMondayなどのサイトで見ることができます。

構造作成

図要素を使用します。これには、バナー（ヒーロー画像）（ここでは3つの異なるものを使用）が含まれ、.cd-background-wrapper要素でラップされています。

<div class="cd-background-wrapper"> <figure class="cd-floating-background"> <img src="img/cd-img-1.jpg" alt="image-1"> <!-- images here --> </figure> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使用する画像のサイズは同じにする必要があります。

スタイルを追加する

ヒーロー画像を作成するには、要素を互いに重ね合わせます。最初の要素は静的な位置にあり、残りは絶対的な位置にあります。 それぞれに別々のtranslateZ値が割り当てられます。



視差効果の概念は次のとおりです。ユーザーが「ヒーロー画像」バナー上でマウスを動かすと、マウスの位置に応じて、.cd-floating-background要素が（X軸とY軸に沿って）回転します。 エレメントのtranslateZ値は異なるため、各エレメントの回転は異なります。



この効果を完全に実現するには、要素が3次元空間に正しく配置されていることを確認する必要があります。最初に、子が配置される3次元空間を作成する.cd-background-wrapperのパースペクティブ値を指定します。 次に、transform-style：preserve-3dを.cd-floating-backgroundに割り当てて、これらの子がフラットではなく3次元空間に配置されるようにします（デフォルトで設定）。 TranslateZが残りを行います！

 .cd-background-wrapper { overflow: hidden; perspective: 4000px; } .cd-floating-background { transform-style: preserve-3d; } .cd-floating-background img:first-child { transform: translateZ(50px); } .cd-floating-background img:nth-child(2) { transform: translateZ(290px); } .cd-floating-background img:nth-child(3) { transform: translateZ(400px); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

IEについて ：IE9はCSS3 3D変換をサポートしません。IE10+は「transform-style：preserve-3d」プロパティをサポートしません。 したがって、IEブラウザーでは、視差効果は表示されず、標準画像が表示されます。

イベント処理

initBackground（）関数を画像読み込みイベントにバインドします。この関数は、要素の位置プロパティの値を相対から絶対に変更します（「is-absolute」クラスが使用されます）。 この場合、.cd-background-wrapper要素の正しい高さ（子が絶対位置にあるため、デフォルトの高さは0である）と正しい寸法.cd-floating-background（シェルよりも大きくなければなりません）を指定する必要があります-その後、回転中に空の境界線が見つかりません）。



アスペクト比と画像の幅を推定し、.cd-background-wrapperの高さをviewportWidth / heroAspectRatioの値に等しく設定します。 .cd-floating-backgroundの高さと幅は.cd-background-wrapperに比例する必要があり、左側と上側のパラメーターは、画像が親要素の中央にくるように設定する必要があります。



その後、mousedmoveイベントを.cd-background-wrapperにアタッチします。マウスの位置はevent.pageXとevent.pageYを使用して推定され、その後、.cd-floating-background要素にrotateXとrotateYの対応する値が割り当てられます。



注 ：Modernizrは、「preserve-3d」をまだ定義していません。 したがって、この効果を定義していないブラウザーに対してこの効果を作成するために、ブラウザーのサポートに従ってクラス「preserve-3d / no-preserve-3d」を割り当てるgetPerspective関数を使用しました。