觸發ids點擊和當一個特定的ID到達窗口頂部

Question

我想建立一個基於視差的頁面。我的元素基於用戶點擊鏈接時移動，但我希望其他動畫在div達到TOP時觸發，而不僅僅是點擊功能。我怎樣才能得到＃CIRC1，＃CIRC2，＃circ3和＃＃時英語頻道達到

$('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

您使用的是JavaScript庫的更好，比如Skrollr.js circ4開始上單擊動畫和也。

您將更好地控制動畫和時間。

這裏有一些教程，以幫助您入門：

• Simple parallax scrolling tutorial
• How to create a parallax scrolling website

Answer 2

你必須使用waypoint.js在您的項目跟蹤元素在你的網頁。 這樣，每當他們進來的窗口，它只是觸發一些動作

比如你要＃CIRC1是動畫，你應該以這種方式

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

好運

做到這一點