割合

Question

を失うことなく、視差フルスクリーンの背景を作るためにどのように私は、マウスを使って動くものを背景にしたいです。効果が良いとの背景には、画面よりも約15％より大きくする必要があります。私はタイル可能イメージを使用していませんよ。

私はbackground-size:115%を使用しようとしましたが、画像が水平であり、ブラウザのサイズが十分に大きくない場合、画像のエッジが確認できます。

background-size:coverを使用すると、アウトイメージがないためアニメーションできないため、機能しません。

width:115%; height:115%の画像を使用すると、画像が不均衡になります。

bodyのサイズがすべてのフレームを再計算するため、position absoluteを使用し、カバーの背景とのメッシュの115％がdivの上および左にアニメートすると、パフォーマンスが低下することがあります。

Answer 1

一つの可能​​性は、Zでの変換と、ある視点を使うことです。

次にマウス移動

var mouseMove = function(e) { 
 
    var elem = document.getElementById('container'); 
 
    elem.style.perspectiveOrigin = e.pageX +'px ' + e.pageY + 'px'; 
 
} 
 

 
window.onload = function() { 
 
    this.addEventListener('mousemove', mouseMove); 
 
}

body, html { 
 
    height: 100%; 
 
    margin: 0px; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    perspective: 400px; 
 
} 
 

 
.inner { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    background-image: url(https://static.pexels.com/photos/51021/pexels-photo-51021.jpeg); 
 
    background-size: cover; 
 
    transform: translateZ(100px); 
 
}

<div id="container"> 
 
    <div class="inner"> 
 
    </div> 
 
</div>