2014-03-31 42 views
0

我已經看到一些關於如何在CSS中延遲動畫的答案,但我希望能在Javascript中做到這一點。從視口底部延遲JavaScript XX像素

我有一個動畫,加載頁面後立即激活。該網站是一個單獨的頁面,我希望當客戶端滾動到該部分時激活動畫。我聽說你可以通過從視口底部激活動畫X像素來做到這一點。

感謝

+0

結帳http://janpaepke.github.io/ScrollMagic/或http://johnpolacek.github.io/scrollorama/。我認爲這正是你正在尋找的 – friedi

+0

是[this](http://jsfiddle.net/4Za7v/)你在找什麼?在這個例子動畫是基於錨元素,但是這很容易改變 - 例如,基於對滾動頁面的高度的50%。 – raina77ow

回答

0

這裏是一個小矯枉過正,但它應該給你所有你能想到的你想達到什麼樣的概念。

基本上,你測試的時候,你要開始你的動畫是從屏幕的矩形內,並使用一個標誌,以防止動畫重演每個滾動您在該地區是後。

// teach JavaScript about coördinates 
function CoOrdinate(x, y) { 
    this.x = x; 
    this.y = y; 
} 
CoOrdinate.prototype.inside = function (A, D) { 
    if (this.x < A.x || D.x < this.x) return false; 
    if (this.y < A.y || D.y < this.y) return false; 
    return true; 
} 
// write a factory for the flag + action test 
function actionFactory(hotspot, action) { 
    var flag_done = false, 
     test = function (topleft, bottomright) { 
      if (flag_done) return; // cancel if we've done it before 
      if (hotspot.inside(topleft, bottomright)) { 
       flag_done = true; 
       action(); 
      } 
     }; 
    return test; 
} 
// create your action with the factory 
var someAction = actionFactory(
     new CoOrdinate(0, 100), // the coördinate to be in the screen 
     function() {console.log('foo')} // pass animation invocation here 
    ); 
// so far none of this is getting invoked, so 
// make the stuff all work when the page is scrolled 
window.addEventListener('scroll', function() { 
    var x = window.pageXOffset, 
     y = window.pageYOffset, 
     h = window.screen.availHeight, 
     w = window.screen.availWidth; 
    someAction(
     new CoOrdinate(x , y ), 
     new CoOrdinate(x + w, y + h) 
    ); 
}); 

上面的例子只是記錄"foo"如果座標[0, 100]是在屏幕上。