国外有非常多不错的动态网页作品,非常喜欢,请问如果想要分析他的制作过程需要怎么做
回复内容:
谢邀~
Html5网页动画
其实都是一个一个物体的
某个属性的改变
通过
Chrome的
右键→检查元素可以看到
一个特定物体的CSS 动画属性
是怎么被编辑的
进而了解这个物体
是怎么运动的
下面就举一个解剖网站的例子
有一个Starbucks Frappuccino®
网站
我很喜欢的动画是
在移动端上的Toggle导航
右上角的「三」(叫Toggle)在点下去导航列展开后会旋转变成「X」
代表说再点我一次可以关掉导航
非常有趣
可以点开gif看:
http://manglekuo.com/img/toggle.gif 所以一开始我现在电脑上的Chrome
把Chrome的页面宽度变窄让他出现那个Toggle
然后右键点那个Toggle→ 检查元素
![如何解剖一个网站?](//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg)
这时候可以看到
开发人员工具出现在页面下方
我在这里为了方便截图
把它拆了出来
放到了右边
如下图:
![如何解剖一个网站?](//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg)
而当我点击了那个Toggle之后
我发现那个div的class
从原来的"sbOne mobile"
变成了"sbOne mobile expanded"
如下图(注意看两张图被选择的那行的上一行的差别)
![如何解剖一个网站?](//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg)
这是一个网页动画很常被使用的技巧
发生一个事件(在这里是点击)之后
用Javascript
改变class里的内容
进而触发动画
这时候我们去CSS(在这里是main.css,随便点击截图中最右边任意一个main.css?. ..那一长串就可以去到main.css)里头
用ctrl/command F 找到".expanded" Class
如下图(图长可能需要点击一下才能看到全部)
![如何解剖一个网站?](//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg)
最下面那一大段一直重复的
就是我们想要的了。
因为 HTML 5 动画
还是实验性的东西
开发者为了要让各大浏览器支持
需要加不同的前缀。
HTML 5 动画有两种
一种是Animation,一种就是这个Transition
(感兴趣自己查)
Animation是可以指定帧的
比如说时间是0%-20%的时候转130º,
20%-100%的时候转50º
而Transition是只能制定属性和时间
在这里是all 1s;
也就是所有属性一秒
代表说假如有任何属性发生了改变
都用一秒的渐变来完成
而上面用了transform: rotate(-45deg);
所以就会用一秒的时间渐渐转-45º的角度
再下面的两段代码他指定了第一根横棒和最后一根横棒的动画...(下图)
![如何解剖一个网站?](//zhstatic.zhihu.com/assets/zhihu/ztext/whitedot.jpg)
根据电脑代码的
后面覆盖前面原则
最终会变成
当按下去Toggle之后
第一根横棒转45º
第二根横棒转-45º
第三根横棒不转透明度变0
三根横棒的所有属性发生改变时有1秒渐变
跟我们观察到的结果一样!
所以这就是 这个动画的精髓所在!
我们成功的解剖到了我们想要的东西。
还有什么问题吗。 。 。
我懒得接着写了。 。 。
你直接问吧。 。 。
国外的很多动态网页,通常都是由js生成页面dom并入场,这类网站信息量少,页面数量也少,但是交互性很强。研究这类网站重点看js。
摘出需要的部分,或者删掉不需要的部分。