클릭시 트리거 ID가 특정 ID가 창 상단에 도달했을 때

Question

시차 기반 페이지를 작성하려고합니다. 나는 사용자가 링크를 클릭 할 때 따라 움직이는 요소를 가지고 있지만 div가 클릭 기능뿐만 아니라 TOP에 도달하면 다른 애니메이션이 트리거되기를 원합니다. 나는 # 영어 채널 당신은 Skrollr.js 같은 자바 스크립트 라이브러리를 사용하여 더 나은있는

$('a.english-channel').click(function(){ 
    $('html, body').animate({ 
     scrollTop:$('#english-channel').offset().top 
    }, 1000, function() { 
     parallaxScroll(); // Callback is required for iOS 
    }); 
     $(function(){ 
      $('#circ1').delay(1200).animate({ 
      width: '150px', 
      height: '150px', 
      opacity: '1.0' 
      },500); 
      $('#circ2').delay(1400).animate({ 
      width: '300px', 
      height: '300px', 
      opacity: '1.0' 
      },400); 
      $('#circ3').delay(1600).animate({ 
      width: '750px', 
      height: '750px', 
      opacity: '1.0' 
      },300); 
      $('#circ4').delay(1800).animate({ 
      width: '1350px', 
      height: '923px', 
      opacity: '1.0' 
      },200); 
     }); 
    return false; 
}); 

Answer 1

에 도달 할 경우에도 클릭에 애니메이션을 시작 circ4 #의 circ1, #의 circ2, #의 circ3와 #을 얻을 수있는 방법.

애니메이션과 타이밍을보다 잘 제어 할 수 있습니다. 여기

당신이 시작하는 데 도움이되는 몇 가지 튜토리얼입니다

• Simple parallax scrolling tutorial
• How to create a parallax scrolling website 당신은 당신의 웹 페이지의 요소를 추적하는 프로젝트에 waypoint.js를 사용할 필요가

Answer 2

. 는 그래서 그들은 창에 올 때마다 그냥 예를 들어 어떤 행동

를 트리거 것을 당신은 #의 circ1는이 방법

$("#circ1").waypoint(function(event, direction) { 
      $('#circ1').delay(1200).animate({ 
      width: '150px', 
      height: '150px', 
      opacity: '1.0' 
      },500); 
    }); 

행운

에서이 작업을 수행해야 애니메이션하려면