【问题标题】:how does this website do the page load animation? [closed]这个网站如何做页面加载动画? [关闭]
【发布时间】:2012-01-21 17:19:12
【问题描述】:

http://visualidiot.com/articles/hacking-facebook

转到本网站上的任何文章,您会看到页面的主体会在向下滑动然后向上滑动的位置播放动画。页面的主体动画,页眉没有。当我之前看到页面加载动画时,它们一直被错误所困扰,在点击返回按钮并返回页面时会出现混乱。

这家伙到底是怎么做那个动画的?

【问题讨论】:

  • 看起来很明显但是......为什么不直接问他呢?他的页面说他在 Twitter 上。
  • 我什至没有想到... 额头咂舌

标签: animation css pageload


【解决方案1】:

我是 Visual Idiot,是我的网站的创建者。

基本上,正如 Seth 所说,这一切都在 animations.css 中,更具体地说,它使用关键帧动画来完成任务:

@-webkit-keyframes bounce {
    0% { opacity: 0; -webkit-transform: translateY(-800px); }
    60% { opacity: 1; -webkit-transform: translateY(25px); }
    80% { -webkit-transform: translateY(-8px); opacity: .8; }
    100% { -webkit-transform: translateY(0); opacity: 1; }
}

这定义了一个动画,然后可以像这样使用它:

.bounce {
    -webkit-animation: bounce .75s ease-in-out;
}

现在,只要任何东西添加了“反弹”类,它就会在我的网站上产生可爱的小效果页面。不过需要注意的一点是:如果您通过 Javascript 添加类(但仅在较长的页面上),它似乎会更好地工作,因为它有时会在 DOM 准备好之前运行动画,

如果您想了解更多关于 CSS 中关键帧动画的信息,我建议您查看 Dan Eden 的精彩 animate.css library。我从拆分源文件中学到了很多东西。

【讨论】:

  • 啊,非常感谢。我只是喜欢你的网站设计,如此简单却......美丽。动画,就像它的设置方式一样,很漂亮。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-29
  • 2021-07-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多