说三道四技术文摘-感悟人生的经典句子
说三道四 > 文档快照

看IE11如何助力AAF推动公益事业

HTML文档下载 WORD文档下载 PDF文档下载
AAF是一个公益组织,在过去的15年中他们在拯救月熊方面做了非常多的努力,月熊是非常可爱的动物,有着非常丰富的故事,我们也希望能够帮助AAF通过在线的形式把他们的努力分享给更多的人知道。

在北京举办的亚洲动物基金成立15周年庆典活动上,AAF授予了微软“最佳教育贡献奖”,以表彰其对动物保护的支持和贡献,并与IE11浏览器携手推出了“月熊志”网站。该网站使用最新的HTML5技术,让用户能够通过网络身临其境的了解可爱的月熊。通过丰富的3D动画、高清图片和视频、以及自然的触控操作,让人们在网页上也能获得如应用一般流畅的沉浸式用户体验,更直观地了解月熊保护的故事,而且能够让网友和内容进行有趣的互动,从而更好地调动了大家参与的积极性。

像翻阅杂志一样轻松,网站中的翻页

整个体验的名字叫月熊志,总共分为三部分组成,第一部分内容是一只叫Jasper的熊和他小伙伴之间的故事,第二部分讲Jasper和他小伙伴的过去,活熊取胆所带来的一些痛苦的经历,第三部分则是将AAF在这 15 年过程当中对于拯救黑熊还有动物福利作出的贡献。


用户在浏览整个体验的过程当中,就像翻阅一本杂志一样轻松,网站中的翻页依靠了CSSTransitions和CSS Transforms,但这又不是一本传统的电子杂志,在杂志中开发者加入了非常丰富的 3D元素、高清图、视频和信息交互方式,并且可以触控流畅体验,让人们沉浸在月熊的故事和AAF为保护月熊所做的努力中。

技术要点:

CSS transition

CSS transition属性的作用是:平滑的改变CSS的值。无论是点击事件,焦点事件,还是鼠标hover,只要值改变了,就是平滑的,就是动画。于是,在整个网站通用的class中加入transition属性,就可以很轻松的渐进增强地实现动画效果,超有实用价值。

transition有的具体属性见下面介绍:

  • transition-property :* //指定过渡的性质,比如transition-property:backgrond 就是指backgound参与这个过渡
  • transition-duration:*//指定这个过渡的持续时间
  • transition-delay:* //延迟过渡时间
  • transition-timing-function:*//指定过渡类型,有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面的例子

.trans{display: inline-block;padding:1px8px;transition-property: background-color;transition-duration: 0.3s;transition-timing-function: ease;}.trans:hover{background-color:#486AAA;color:#fff;}<ahref="#"class="trans">经过我~~~</a>当然也可以不用把transition属性一个一个摊开写,而是合并。如:.trans {display: inline-block;padding:1px8px;transition: background-color 0.3s ease;}

transition中的transition-timing-function属性有一堆ease相关的值(linear | ease-in | ease-out | ease-in-out | cubic-bezier)。

  • linear :均匀的平缓的效果
  •  ease-in :先慢后快的缓动效果
  •  ease-out :先快后慢的缓动效果
  •  ease-in-out:先慢后快再慢的缓动效果
  •  cubic-bezier:平时基本不会用到

CSS transform

CSS transform指变换,类似于PS中的Ctrl+T自由变换。Transform包含拉伸,压缩,旋转,偏移等。

Transform包含下面属性:

  • none :指定一个身份转变
  • matrix(<number>, <number>, <number>, <number>, <number>, <number>) :以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a b c d e f]变换矩阵
  • translate(<translation-value>[, <translation-value>]) :通过矢量[tx, ty]指定一个2D translation, tx 是第一个过渡值参数, ty 是第二个过渡值参数选项。如果<ty> 未被提供,则ty以 0 作为其值
  • translateX(<translation-value>) :通过给定一个X方向上的数目指定一个translation
  • translateY(<translation-value>) :通过给定Y方向的数目指定一个translation
  • scale(<number>[, <number>])提供执行[sx,sy]缩放矢量的两个参数指定一个2D scale(2D缩放)。如果第二个参数未提供,则取与第一个参数一样的值
  • scaleX(<number>) :使用 [sx,1] 缩放矢量执行缩放操作,sx为所需参数
  • scaleY(<number>) :使用 [i,sy] 缩放矢量执行缩放操作,sy为所需参数
  • rotate(<angle>) :通过指定的角度参数对原元素指定一个2D rotation(2D 旋转),需先有transform-origin属性的定义
  • skewX(<angle>) :按给定的角度沿X轴指定一个skew transformation(斜切变换)
  • skewY(<angle>) :按给定的角度沿Y轴指定一个skew transformation(斜切变换)
  • skew(<angle> [, <angle>]) :X轴Y轴上的skew transformation(斜切变换)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则值为0,也就是Y轴方向上无斜切

transform属性要是加上transition的过渡特性,那就是如虎添翼,例如下面的例子:

.trans_effect{display:block;line-height:100px;width:100px;background:#beceeb;margin:30px auto;text-align:center;-webkit-transition:all 2s ease-in-out;-moz-transition:all 2s ease-in-out;-o-transition:all 2s ease-in-out;-ms-transition:all 2s ease-in-out;    transition:all 2s ease-in-out;}.trans_effect:hover{-webkit-transform:rotate(720deg) scale(2,2);-moz-transform:rotate(720deg) scale(2,2);-o-transform:rotate(720deg) scale(2,2);-ms-transform:rotate(720deg) scale(2,2);transform:rotate(720deg) scale(2,2);        }<ahref="#"class="trans_effect"></a>

满足来自触控设备用户的流畅体验

备案号:鲁ICP备13029499号-2 说三道四 www.s3d4.cn 说三道四技术文摘