WordPress 网站建设在此通过 3 种简单的动态特效(而且每个人都可以轻易学会),来探索用 HTML5 网页设计多媒体互动,能为展示带来什么样的神奇效果。很多人都说我们 SEO 站群的网站设计效果做的很不错,其实说多了更多的是我们设计师们的努力及经常会举办一些小型的分享会,把好的资讯分享给身边的每一个小朋友,让大家一起进步,而这边文章就是我们 WordPress 网站建设-SEO 站群设计部的小伙伴们分享的小内容今天分享给大家!

1 、延时,60 秒做出生长的效果

如果您准备发布 WordPress APPle Watch,如何在 5 秒内立刻抓住人们的眼球?一个简单却实用的方法是让产品细节分步呈现出来,形成组装产品的生长效果。

大部分产品有 PSD 格式的原型图,设计精美但细节繁多,汇入 PPT 等软件进行动效处理十分麻烦。如上图,利用 iH5.cn 发布的新功能,能在保留所有分层结构的前提下一次性汇入 PSD,快速制造延时的动效。

把 PSD 档案拖拽到编辑器进行上传,再为产品的部件分别新增飞入、弹跳等动效、设定动效在不同时间出现,就能模拟出产品的 “生长情况” 。

KEY#1:动效的延迟一开始可以控制在 1-3 秒,后面的间隔越来越短(并低于动效时长),还能形成重叠的动感,有利于制造现场的张紧感。

2 、聚焦,Duang 一样的特技

“怎么让观众把注意力集中到我想要让他们看的地方?” 聚焦有两个技巧,一是把您想要突出的内容放大,二是隐藏不重要的内容。

着名的展示工具 Prezi 用的就是个法子,实时放大展示重点。但它应用还不广,每到一个地方得重灌一次,功能也比较有限。如上图,使用画布工具来设计好玩的 “聚焦” 特技的遮罩功能,能在普通浏览器中进行线上展示。

在画布下放两张图片,一张展示图,一张 PNG 格式的白色苹果 LOGO,把展示图的遮罩设为苹果 LOGO,就有上图的效果。容易吧?如果再为图片放一个向左滑动的效果,还能制造漂移的动感。

KEY#2:画布的遮罩效果和设为遮罩的图片息息相关,作为遮罩的图片色彩越明亮,被遮的图片越不透明。

因为作为遮罩的苹果 LOGO 是全白的,它显示区域内的图片才是完全不透明的。比如上面从白色到黑色的四个圆是遮罩,它的颜色越深,城堡图片对应位置的透明度越低。遮罩全黑时,城堡就不见了。

(注:国内很多移动端浏览器尚未支持 HTML5 的 Canvas 遮罩效果,所以它目前更适用于 PC 端展示。)

3 、演示,是调节气氛的步伐

如果想要设计一场毫无缺漏的发布会,直接搞一场录播就行,但也失去了现场的魅力。因为可能会出现各种突发情况,现场才更刺激、更有吸引力。怎样能在展示中加入可控的 “变数” 来调节气氛?

答案之一是演示,而且知名是用一些让观众自己上台,同样能轻易完成的行为。电脑上的比如简单的拖动,如上图,利用有趣的遮罩结合拖动来展示不同型号的苹果手机。

这里应用到了遮罩强悍的 “滤镜” 功能,设定很简单,只是把刚才的白色苹果 LOGO 做成了彩色渐变,再用一张苹果手机的图片作为彩色 LOGO 的遮罩。这样一来,相当于保留了 LOGO 的颜色特征,又能利用苹果手机图片的色彩明暗变化让 LOGO 现出苹果手机的 “原形” 。

这时候,把苹果 LOGO 图片的 “拖动型别” 设为任何方向,就能在展示中途随意用滑鼠拖移苹果 LOGO,演示为苹果手机加彩色滤镜的特技了。

KEY#3:想要实现 Prezi 的聚焦放大效果?使用事件工具,在一张允许拖动的图片上放个透明按钮,设定点选按钮时图片尺寸放大就行

“除非您有值得一说的东西,不然您就做不了一个好的演讲。”

全球赫赫有名的 TED 大会,靠演讲为世界传播了各种各样的创意。而作为 TED 多年的策展人 Chris Anderson,有着上面这句名言。

有了值得一说的东西,是否有足够好的演讲手段,是史蒂夫·乔布斯和蒂姆·库克在苹果发布会上反响的区别。您更欣赏乔布斯还是库克?现在,您还要错过用动态展示抓住观众注意力的机会吗?