이 ... superscrollorama

Question

내가 SuperScrollorama JQuery와 및 CSS3를 사용하여 프레임에 의해 약간의 애니메이션 프레임이 사용하여 시차 웹 사이트를 구축하고에 고정 된 요소를 통해

플레이하지만 난이 문제에 갇혀 있어요 그렇게까지 종료 후, 난 ... Jquery ScrollTo를 사용하여 페이지를 탐색 할 Tween Lite ScrollTo 플러그인을 사용하지만 아무것도 작동하는 것 같다 없다

내가 scrollTop 이벤트를 사용 기본 jQuery를 시도 ... 일부 스크롤 플러그인을 사용하여 페이지를 탐색하려고

내가 페이지 position:fixed;로 함께 고정되어 있으며 페이지가 해당 위치로 스크롤 doesnot 사이에 붙어 경우는 goggling 후 얻는 문제 ...

jQuery를 ScrollTo, 내 코드 : -

$('.menus a').click(function(e){ 
    e.preventDefault(); 
    $.scrollTo(this.hash, 2000, { 
    easing:'easeInOutExpo', 
    offset:3000, 
    axis:'y', 
    queue:true 
    }); 
}); 

기본 scrollTop의 JQuery와와

, 내 코드는 : -

$('a').bind('click',function(event){ 
    var $anchor = $(this); 

    $('html, body').stop().animate({ 
     scrollTop: $($anchor.attr('href')).offset().top 
    }, 1500,'easeInOutExpo'); 

    event.preventDefault(); 
}); 

현재 내 코드 리를 작동 KE이 : ​​- 당신은 내 데모에서 볼 수 있듯이 http://jsfiddle.net/tFPp3/6/

는, 스크롤 내가 Superscrollorama의 고정 요소를 통해 재생하는 경우

이 솔루션 무엇입니까 ... 해시를 통해 정확한 위치에 도달하기 전에 사이에 갇혀 ?

Answer 1

두 애니메이션을해야합니다. ancher 오프셋에 도달 한 다음 superscrollorama가 애니메이션의 새 요소를 추가하고 문서 높이를 다시 계산 한 후 두 번째 애니메이션을 실행하여 해당 페이지의 올바른 키 프레임에 도달하게합니다. 해당 섹션의 오프셋 3000에서 고정). 각 섹션은 두 번째 애니메이션을 시작하기 전에, 우리는 우리가 다시 다음 섹션까지 스크롤되지 않도록 테스트해야 지속적 그래서 변화를 오프셋

는

$(function(){ 
    var hashes = []; 

    $('.menus a').each(function(){ 
     hashes.push(this.hash); 
    }); 
    console.log('hashes:', hashes); 

    $('.menus a').click(function(e){ 
     e.preventDefault(); 
     var h = this.hash; 
     var pageTop = $(h).offset()['top']; 
     console.log('pageTop=',pageTop); 

     $.scrollTo(pageTop+1, 2000, { 
      easing:'easeInExpo', 
      axis:'y', 
      onAfter:function(){ 
       setTimeout(function(){ 
        console.log('hashes:', hashes); 
        var id = hashes.indexOf(h); 
        console.log('hashes['+(id+1)+']=', hashes[(id+1)]); 
        var nextPageTop = $(hashes[id+1]).offset()['top']; 
        console.log('nextPageTop=', nextPageTop); 
        var keyOffset = pageTop + 3000; 
        console.log('keyOffset=',keyOffset); 

        if(keyOffset < nextPageTop){ 
         $.scrollTo(keyOffset, 2000, { 
          easing:'easeOutExpo', 
          axis:'y' 
         }); 
        } 
       },100); 
      } 
     }); 
    }); 
}); 

참고. superscrollorama가 각각의 오프셋을 테스트하기 전에 소스를 만들 수있게하려면 여기에도 약간의 지연이 필요합니다 (슬프게도 이벤트를 제공하지 않는 것 같습니다).

Answer 2

나는 당신과 같은 문제가있었습니다. 다음은 내가 고정하는 방법입니다 ...

우선 Superscrollorama는 요소 앞에 스페이서 핀을 추가한다는 것을 알고 있습니다. 사용자가 섹션을 스크롤해야하는 시간을 정의하는 요소의 높이를 설정합니다 (기간은) .... 그래서 이론적으로 우리가해야 할 모든 당신이로 이동 한 다음 해당 요소의 상단에서 오프셋 할 요소 전에 발생하는 모든 핀 높이를 ...까지 추가되어

내가 한이었다 ....

는 당신이 이동하고 싶은 요소를 알아보십시오. 그 핀 앞에 몇 개의 supersrollorama-pin-spacers가 있는지 확인하고, 모든 핀의 높이를 계산 한 다음이를 초기 scrollTo 함수에 오프셋합니다.

pin = $('#pin-id').prev(); //find the spacer pin 
prevPin = pin.prevAll('.superscrollorama-pin-spacer'); //find all the pins before this 
heights = []; //create an array to store the pin heights 

$.each(prevPin, function(index, value) { 

    value = $(this).attr('height'); //get each height 
    heights.push(value); // push it to array 

}); 

//use eval to join all the heights together 
heights = eval(heights.join("+")); 

이제 우리는 높이가 있으므로 스크롤 할 수 있습니다. .....

TweenMax.to($('html,body'),1, { scrollTop:heights, }); 

행운을 비네! 나는 이것이 당신을 돕기를 바랍니다.

Answer 3

비슷한 문제가있어서 superscrollorama 프로젝트의 janpaepke가이 작업을 쉽게하기 위해 추가 토글을 추가 한 것으로 나타났습니다.

수동으로 스페이서를 추가 할 수 있으므로 핀의 pushFollowers 플래그를 false로 설정하여 조정할 필요가 없습니다.

예 JS

controller.pin($('#pin-id'), 200, { 
    anim: new TimelineLite().append([TweenMax.fromTo($('#pin-id'), 2, {css:{opacity: 1}}, {css:{opacity: 0}})]), 
    offset: 0, 
    pushFollowers: false 
}); 

예 HTML은

<div id="pin-id"> 

Bunch of Content 

</div> 
<div style="padding-top: 200px"></div>