我居然找到了最炫酷的H5动效库,链接就在本帖!
最近奥运的案例高质量的H5真多,但连续两期帖子也确实发的不少了。所以,小呆今天要给大家分享些好久未发的H5素材了,而这期的主角就是——动效!你做了这么久的H5设计,知道那边能看到H5的动效演示库么?哈哈,世界上真的存在这样的东西,而且已经存在了很久很久了!今天小站就给你介绍一个纯HTML5的动效网站,它的名字叫做form follows function,简称FFF。
FWA的FFF
互动行业的老枪们都不会陌生FWA这个组织,他是一个世界著名的网站收录平台,收录了世界上最前沿的网站优秀案例,带有浓重的精英情节和严重的偶像包袱,如果你向一个FWA的崇拜者问FWA是什么时,他会情不自禁的告诉你,这是全宇宙最牛逼的、最顶级、最骚包的网站平台。好吧, 实际也差不多吧...
FWA官方LOGO
FWA官方首页
而FFF就是FWA做的一个演示动效酷的网站,从命名你就能感受到form follows function的意思实际就是—网络功能决定形式,形式跟随功能,翻译过来的意思就是:不懂技术的设计师不是好策划,恩!我相信这样你就能听懂了!
网站首页
网站首页就是各种色块的标签,点击不同的标签就会跳转到不同的动效演示,该网站通过PC和移动端都可以访问,网速不好的话,移动端会略卡。
红色演示
我们随便打开了一个模块,你会发现这个星空的全景图位移效果,就是朋友圈里面最流行的伪VR,假全景的技术套路,然后在这个形式的发展下,我们又看到了《造物节邀请函》这类再创作的新颖形式。
黄色演示
而我们随便打开一支黄色的模块,你会看到一个将画面处理为马赛克的技术施加效果,而且颗粒点会随着画幅的改变而发生比例和色彩上的改变,似乎我们在朋友圈还没有看到过类似效果实例。
绿色演示
原来H5早就可以实现根据点击位置的变化而改变颜色的效果了,类似的案例我们目前也是没有看到过的。
蓝色首页
这个演示特别有趣,在界面内点击月亮和太阳,你会持续看到不同的效果演示,而且树木也会越长越大,这样的动态效果也是借用HTML5来实现的。
最后我再录制一个演示,这个钟表翻页的效果也是我们之前在朋友圈里面比较常见的动态效果,只不过在FFF网站看到的案例更加的细腻入围~
FFF的演示太多了,各个耐看、有逼格又少见。但是,你可能不会相信,你看到的这些大量演示都是在2012期间就被放出的,小呆在14年开始关注H5时就注意到了该网站,但直到2年后的现在,才渐渐意识到这些内容对我设计H5开阔眼界的巨大作用,就动效而言,整个网站的模块转场方式、元素切换方法都是十分值得学习的~
在看看我们朋友圈的那些H5除了做假朋友圈就是做假结婚证,而且做的还真的很假,在类似内容如此泛滥的契机,再从新返璞归真的去炒炒这些时髦的冷饭,也许你会有意外的收获也说不定哈!我这里就给大家个引子好了,建议同志们先收藏网站,日后慢慢去研究,点击“原文链接”你就会跳转到FFF。
好了,咱们本期的素材分享就到这里了,咱们下期见~
延伸阅读推荐:
进入资讯站社群,看H5分享
- 加微信:kuzhanh5 -