想知道这几个主流的网页动画效果是如何做出来的

Question

我是个前端小白，所以在这里整理一下很多网页都见过的小特效，想问问有什么最佳实践。（我想问的最佳实践也就是扩展性最好，代码最优雅，兼容性最好，虽然我知道用jq，js等写很多累死人的代码也能实现，但是我想知道有什么最简单的办法能实现它）

1. 慕课网http://www.imooc.com/u/1976589 个人中心左上角的头像在王页面下面滚动的时候会自动变小，但是位置没有变化
   

2.阿里云首页的产品介绍部分（鼠标滑动上去会自动展开，具体看页面效果）https://www.aliyun.com/?utm_medium=text&utm_source=bdbrand&utm_campaign=bdbrand&utm_content=se_32492

3.极光推送首页那些圈圈放大，是css3动画吗？它怎么做到我页面滚动到所在手风琴页的时候才开始播放呢？https://www.jiguang.cn/

4.魅族官网顶部的导航栏鼠标划上去自动高度变长然后从右向左淡入加载产品图片http://www.meizu.com/

这几个在很多网站首页都能看到的动画效果，想问问如何用最好最快的办法实现他们？

Answer 1

1. 用js监听滚动事件, 然后对图片添加或者删除suimg样式, suimg有设置图片大小

2. 用js监听鼠标mouseover,mouseout事件, 根据鼠标所在位置, 决定对某个div进行隐藏或者显示

3. css3动画

4. css3中的translate3d或者让translateX都可以

Answer 2

你可以看源代码。

Answer 3

建议先按自己的理解，然后做个一模一样的出来，哪怕代码又烂又丑，先实现。然后基于第一版一点一点的修改，精简封装等等，等到实在不知道怎么改的时候，再看看一些文章或者优秀的动画的源码或者网站，对比下思路。这样提升的才会快，你也能彻底理解改怎么写，如果一开始就想着写完美，基本是不可能的。都是一点点优化，渐进增强。