비율

Question

을 잃지 않고 시차 전체 화면 배경을 만드는 방법 그래서 마우스로 이동 어떤 배경을 만들고 싶어. 효과가 좋으려면 배경이 화면보다 약 15 % 커야합니다. 나는 칠할 수있는 이미지를 사용하지 않고있다.

background-size:115%을 사용해 보았지만 이미지가 수평으로 보이고 브라우저 크기가 충분하지 않으면 이미지의 가장자리를 볼 수 있습니다. 더 outter는 이미지가 없기 때문에 내가 애니메이션을 할 수 없기 때문에 작동하지 않습니다 background-size:cover를 사용

. width:115%; height:115%와 이미지를 사용

는

이미지가 불균형하게됩니다. 어디 선가 읽어

절대 위치를 사용하여 성능 신체 크기 재 계산 때문에 모든 프레임에 대한 나쁜 것 덮개의 배경으로 115 %를 mesure 사업부의 최고 애니메이션과 왼쪽?

Answer 1

하나있는 posibility 그냥 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>