iOS의 Safari에서 시차 스크롤

최대한 멀리 스크롤하는 동안 JS를 실행할 수 없다는 것을 알고 있습니다. 예를 들어이를 달성하기 위해 js의 네이티브 스크롤 효과를 재현한다는 것을 알고있는 모든 iOS 시차 스크롤 스크립트가 작동합니다. IscrolliOS의 Safari에서 시차 스크롤

어떻게 사과가 자신의 웹 사이트에서 그것을 얻었습니까?

이 페이지에서 스크롤 할 때 흐린 배경 이미지를보십시오.

http://www.apple.com/ios/carplay/

출처

2014-06-05 Robin Knight

는 JS없이 iOS 기기 순수 CSS를 생성 할 수있다. Keith Clark와 같은 멋진 사례가 있습니다. here

그러나 iOS 기기에 원하는 효과가 없다는 것을 개인적으로 발견했습니다. 내 터치를 풀면 페이지가 계속해서 스크롤 될 것으로 예상했으나 거의 발생하지 않았습니다. 마치 페이지가 '끈적'한 것처럼 보입니다. 나는 이것이 내가 만난 수많은 순수 CSS 솔루션의 경우라고 생각했다.

나는 일반적으로 부트 스트랩으로 작업하므로 다음 예제는 내가 사용한 시차 효과를 생성하는 데 사용합니다. 당신의 CSS에서

이 추가

이

#fixedbg { 
    background:url(../img/yourparallax-image.jpg) no-repeat center center; 
    background-size:cover; 
    height:100%; 
    position:fixed !important; 
    width:100%; 
    z-index:-2; 
    top:0; 
} 
.header { 
    display: table; 
    position: relative; 
    width: 100%; 
    height: 100%; 
}

그런 다음 HTML이 추가 :

<div id="fixedbg"></div> 

<header id="top" class="header"> 
</header> 

<section id="article" class="article"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12 col-sm-10 col-md-12"> 

       <p class="text">Example text content goes here</p> 

      </div> 
     </div> 
    </div> 
</section>

을 #fixedbg는 CSS에서 올바른 이미지를 호출 한 후 헤더 섹션 내 전체를 설정 시차 효과를 실행하고 싶은 페이지 이미지.

일반적으로 내용에 따라 다른 장치를 사용하기 때문에 다양한 장치 화면 크기에 대해 #fixedbg css insulation media 쿼리를 사용합니다.

이것은 단순한 시차이며 동일한 페이지에 배수가있는 것은 아니지만 위의 코드와 위의 Keith Clark의 샘플에서 샘플링 한 것과 같은 좋은 시발점을 제공해야합니다.

출처

2015-04-26 15:29:07 AlexAlmond

iOS의 Safari에서 시차 스크롤

답변

관련 문제