iPad에서 시차를 만드는 작업

Question

나는 시차 효과에 대해 많이 읽고 있었고 첫 번째 시차 사이트를 만들려고합니다. 나의 주요 관심사 중 하나는 iPad에서 작동하도록하는 것입니다. 나는 Parallax가 iPads에서 잘 작동하지 않는다고 결론 지었다.

이제 모든 Parallax 사이트 중 iPads에서 제대로 작동하는 것으로 보이는 2 개가 발견되었지만 여전히 아이디어가 작동하는 방식이 다른 이유는 무엇인지 모릅니다.

기본적으로 내가 알고 싶은 것은 시차 사이트 간의 차이점입니다. 나는 캔버스 태그를 사용하는 것을 보았지만 다른 것들은 위쪽과 왼쪽 값을 조정하는 것처럼 보이고 다른 것들은 이미지를 대체하는 것처럼 보입니다. 또한, iPad 친화적 인 Parallax 사이트에서 가장 좋은 방법은 무엇입니까?

내가 아이 패드에 잘 작동 찾은이 개 사이트는

은 다음과 같습니다

http://www.nike.com/jumpman23/aj2012/

https://victoriabeckham.landrover.com/INT

감사합니다. 귀하의 질문에 대답하려면

Answer 1

, 나는 코드를 살펴 했어, 내가 이걸 발견 :

// touch 
    function touchStartHandler(e) { 
    //e.preventDefault(); 
    touchStart.x = e.touches[0].pageX; 

    // Store the position of finger on swipe begin: 
    touchStart.y = e.touches[0].pageY; 

    // Store scroll val on swipe begin: 
    scrollStart = scrollTop; 
    }; 

    function touchEndHandler(e) { 

    } 

    function touchMoveHandler(e) { 

    /*if (settings.freezeTouchScroll == true) { 
     $('#status2').html('freezin'); 
     return false; 
    }; 
    $('#status2').html('moovin'); 
    */ 

    e.preventDefault(); 
    offset = {}; 
    offset.x = touchStart.x - e.touches[0].pageX; 

    // Get distance finger has moved since swipe begin: 
    offset.y = touchStart.y - e.touches[0].pageY; 

    // Add finger move dist to original scroll value 
    scrollTop = Math.max(0, scrollStart + offset.y); 
    checkScrollExtents(); 
    } 

내가 그 코드 내 자신을 시도하지 않은,하지만 난 그게 당신이 필요하다고 믿습니다. 나는 그것이 당신에게 필요한 것이면 한번 시도해보고 알려줄 것이다.

Answer 2

내 반응은 https://victoriabeckham.landrover.com/INT

그들은 당신이 제공하는 입력의 종류에 따라 스크롤을 시뮬레이션하는 위해 특별히입니다. 실제로 페이지를 스크롤하지 않고 다양한 속성에 애니메이션을 적용합니다. 터치 이벤트, 마우스 휠 또는 사용자 정의 구운 스크롤 막대에서 읽고 스크롤하려는 양을 봅니다. 페이지의 모든 내용은 컨테이너에 있습니다. 그렇게하면 터치 이벤트를 할 때 페이지에서 얼마나 움직이는지를 읽는 것입니다.

맨 위에는 모든 것을 움직이게하는 애니메이션 루프가 사용됩니다. 그들은 window.requestAnimationFrame 메서드를 활용하여 iPad 및 브라우저에서 원활하게 작동하도록 페이지의 변경 사항을 최적화합니다. 브라우저가 높은 애니메이션 충실도로 이어지는 순환 단일 리플로 함께 동시에 애니메이션을 최적화 칠 수

http://paulirish.com/2011/requestanimationframe-for-smart-animating/ : 여기의 설명이있는 페이지이다. 예제의 경우 JS 기반 애니메이션이 CSS 전환 또는 SVG SMIL과 동기화됩니다. 또한 이 아닌 탭에서 애니메이션 루프를 실행하는 경우 브라우저가 실행되지 않아 CPU, GPU, 및 메모리 사용량이 적어 배터리 수명이 훨씬 길어집니다.

위에는 모든 것이 페이지에서 어떻게 움직이는 지 결정하는 맞춤 키 프레임 개체가 있습니다. 나는이 설정 위로 침을 흘리고있다. 오픈 프레임 워크가 아닙니다. 키 프레임 개체에서 효과가 시작되는 위치, 끝나는 위치, 여유 등을 설정할 수 있으며 해당 프레임 워크는 애니메이션 루프를 통해 나머지를 모두 처리합니다.

{ 
    selector: '#outro2 > .content2', 
    startAt: outroStart+500, 
    endAt: outroStart+1000, 
    onEndAnimate:function(anim) {}, 
    keyframes: [ 
     { 
      position: 0, 
      properties: { 
       "margin-top": 650 
      } 

     }, 
     { 
      position: 1, 
      ease: TWEEN.Easing.Sinusoidal.EaseOut, 
      properties: { 
       "margin-top": 650 
      } 
     } 
    ] 
}, 

은 요약하면, 나는 정의 구현 스크롤의 조합을 생각하고 requestAnimationFrame 방법을 사용하여 사용자 정의 애니메이션 루프는 일반적으로 iOS 장비와 관련된 시차 한계를 넘어 얻을.