정확히 고정되지 않은 시차 배경 이미지

Question

div 안의 배경 이미지에 미세한 시차 효과를 만들려고합니다. 나는 다음과 같은 마크 업 및 CSS ..

HTML

<div class="widget bg-parallax" style="background-image: url(~~set dynamically~~)"></div> 

CSS

.widget { 
    height:500px; 
    position: relative; 
} 
.bg-parallax { 
    background-size: cover; 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
    background-position: center center; 
} 

그러나이 페이지 스크롤로 완전히 정지 된 배경 이미지를 만들어 사용했다.

배경이 스크롤하는 것이지만 페이지보다 훨씬 느립니다.

순수 CSS로 구현할 수 있습니까? 그렇지 않다면 JS/jQuery로 올바른 방향으로 나를 가리킬 수 있습니까? w3schools.com이 코드에서

Answer 1

당신이 할 수있는 몇 가지 방법이 있습니다 약간 다릅니다. 예, 순수한 CSS로 구현할 수 있습니다.

.forefront-element { 
-webkit-transform: translateZ(999px) scale(.7); 
transform: translateZ(999px) scale(.7); 
z-index: 1; 
} 

.base-element { 
-webkit-transform: translateZ(0); 
transform: translateZ(0); 
z-index: 4; 
} 

.background-element { 
-webkit-transform: translateZ(-999px) scale(2); 
transform: translateZ(-999px) scale(2); 
z-index: 3; 
} 

이것은 높이를 제어합니다. Z 값이 음수이면 스크롤 할 때 속도가 느려집니다.

Answer 2

이봐, 당신은 http://www.w3schools.com/howto/howto_css_parallax.asp