시차 깜박임 ... 위치 : 고정 옵션이 없습니다

Question

"시차 효과"를 얻기 위해 overflow : hidden으로 다른 div 안에 이미지의 위치를 ​​다시 지정해야하지만 "position : fixed"를 사용하는 옵션은 없습니다. 여기, 고정 위치 요소 "오버플로 : 숨겨진"부모에 대해 상관 없어 ... 그래서 JS (jQuery) 에서이 작업을 수행해야합니다. 파이어 폭스 모두에서

잘 보이지만, 웹킷 기반 브라우저 및 IE9에 배경 이미지 (개가)이 jsfiddle 예를 보면, 점멸 :이 문제를 해결 얻을 수있는 방법이 http://jsfiddle.net/7J5AM/1/

있습니까? Spotify는 동일한 효과를 사용합니다 : https://www.spotify.com/uk/하지만 2 개의 요소를 사용하여이 효과를냅니다. 첫 번째 요소는 Keyvisual-Image의 자리 표시 자이고 두 번째 요소는 실제 이미지가있는 고정 위치 요소입니다.

나중에 CMS (Typo3)를 사용해야하기 때문에이 방법을 사용할 수 없습니다. 각 Keyvisual을 두 번 (Placeholder + Image) 배치 할 수는 없습니다. 가능하지만 매우 불편합니다. 내 편집자 ...

이 깜박임을 해결할 수있는 방법이 있습니까?

편집 :

var win_h = jQuery(window).height(); 
var scroll_top = jQuery(document).scrollTop(); 
var kv_pos = jQuery(this).parent().offset(); 

if(parseFloat(kv_pos.top) < (win_h + scroll_top)) { 
    var new_top = (((scroll_top - kv_pos.top + 90)/100) * 60); 
    jQuery(this).css('top',new_top); 
} 

Answer 1

: 내가 반응 디자인을 위해 이미지 크기를 조정해야하기 때문에 배경 이미지로 이미지를 사용하는 것은 다음

이 스크립트의 중요한 부분입니다 ... 또한 가능하지 않다

절대 위치로 이것을 수행 할 수있는 방법이 없다. 문제는 Webkit과 IE의 엔진이 위치의 새로운 뷰포트 위치를 설정하는 것입니다 : 스크롤하는 동안 절대 요소. 새로운 위치를 계산하고 설정 한 후에, 내 jQuery (윈도우) .scroll이 점프하고 위치에 대한 새로운/다른 위치를 설정합니다 : absolute 요소. 예를 들어 Mac에서 Magic Mouse를 스크롤하면 매번 jQuery가 마술을하기 전에 브라우저 엔진이 새로운 위치를 설정합니다. 이로 인해 깜박임이 발생합니다! 당신이 위치에 요소를 설정 한 경우에만

는 :

그래서이를 arround 얻을 수있는 길입니다 ... 늘 자신의 위치를 ​​터치 브라우저를 고정 : 숨겨진 및 복사 : 나는 가시성 내 Keyvisuals을 설정 document.ready 후 body-tag 바로 뒤에있는 내용. 그런 다음이 모든 copys가 위치에 고정되어 있습니다. 이제 내가하는 일은 Spotify처럼 "숨겨진 자리 표시 자"에 따라 높이와 최고 값을 설정하는 것입니다.