0
我已經看到一些關於如何在CSS中延遲動畫的答案,但我希望能在Javascript中做到這一點。從視口底部延遲JavaScript XX像素
我有一個動畫,加載頁面後立即激活。該網站是一個單獨的頁面,我希望當客戶端滾動到該部分時激活動畫。我聽說你可以通過從視口底部激活動畫X像素來做到這一點。
感謝
我已經看到一些關於如何在CSS中延遲動畫的答案,但我希望能在Javascript中做到這一點。從視口底部延遲JavaScript XX像素
我有一個動畫,加載頁面後立即激活。該網站是一個單獨的頁面,我希望當客戶端滾動到該部分時激活動畫。我聽說你可以通過從視口底部激活動畫X像素來做到這一點。
感謝
這裏是一個小矯枉過正,但它應該給你所有你能想到的你想達到什麼樣的概念。
基本上,你測試的時候,你要開始你的動畫是從屏幕的矩形內,並使用一個標誌,以防止動畫重演每個滾動您在該地區是後。
// 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]
是在屏幕上。
結帳http://janpaepke.github.io/ScrollMagic/或http://johnpolacek.github.io/scrollorama/。我認爲這正是你正在尋找的 – friedi
是[this](http://jsfiddle.net/4Za7v/)你在找什麼?在這個例子動畫是基於錨元素,但是這很容易改變 - 例如,基於對滾動頁面的高度的50%。 – raina77ow