继续在页面加载CSS动画吗? [英] Continue CSS animation on page load?

问题描述

我希望我的header.php中的元素的CSS动画能够在不同页面上顺利进行.

I want my CSS animations for the elements in my header.php to continue smoothly on different pages.

因此，如果我有200秒的循环动画和80秒的动画，那么我单击关于我们"页面时，动画在页面加载时仍将是80秒吗?

So if I had a 200 second looped animation and 80 seconds in I clicked on the about us page the animation would still be 80 seconds in on page load?

这是否可能?如果可以，怎么办?谢谢.

Is this even possible and if so, how? Thanks.

推荐答案

快速粗略的思考

time = 200000;
var distance = 300;
window.currentTime = 0;

$('#element').animate({ left: distance },
{
  duration: time,
  step: function(now, fx) {

    window.currentTime = Math.round((now*time)/distance);

  }
});

$('a').on("click", function(e){
    e.preventDefault();
    window.location.href = "http://yoururl.com/?startingPoint=" + (time - window.currentTime);        
});

然后在每个文件中执行类似的操作

then in each file do something like

if($_GET['startingPoint']){
    echo 'time = '.$_GET['startingPoint'];
}
else{
    echo 'time = 200000';
}

代替javascript时间变量，我对此表示歉意，实际上只是将其从我的屁股上拉出来了，但是这个概念就在那里了，不需要ajax.

in place of the javascript time variable, i apologize if theres bugs in this, literally just pulled this out of my butt, but the concept is there, and no ajax needed.

这篇关于继续在页面加载CSS动画吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！