回首页

话说离上次官网改版有段时间了,里面的一些CSS3的运用我想看过上篇文章也有所了解。本文再谈谈此次改版中HMTL5、CSS3运用和性能优化等一些总结。还望大家别取笑,欢迎板砖~!PS:具体结构、样式、js处理大家可以访问:(http://chrome.360.cn/)通过debug来参看。

360极速浏览器采用WebKit内核,对最近互联网潮流HTML5、CSS3的支持程度很大。有兴趣的朋友可以看看各大内核对其支持的程度(http://caniuse.com/)。本次是针对极速浏览器软件的特性增加的HTML5、CSS3的应用,也通过CSS3动画来实现一些交互效果。

关于CSS3动画

在开发主要运用到了CSS3的一个动画库Animate.css。其中的效果有震动,翻转,渐显等等。大家可以访问这个网站看demo。http://daneden.me/animate/

从(http://www.w3.org/Style/CSS/current-work)可以看出,CSS动画涉及的知识点包括 CSS 2D Transformations, CSS 3D Transformations, CSS Transitions, CSS Animations。

Transformation 补充定义了width, height, left, top等之外的一些可用于实现动画的属性,如rotate, scale, skew。

Transition 和 Animation 用于定义动画的过程。其中Transition 可以实现简单的动画;Animation则可以通过设定多个关键帧实现相对复杂的动画。

Animate.css动画库就是通过Animate通过设定多个关键帧来实现。以下为Animation的相关语法:

animation:[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]]*

取值:

[ animation-name ]:检索或设置对象所应用的动画名称
[ animation-duration ]:检索或设置对象动画的持续时间
[ animation-timing-function ]:检索或设置对象动画的过渡类型
[ animation-delay ]:检索或设置对象动画延迟的时间
[ animation-iteration-count ]:检索或设置对象动画的循环次数
[ animation-direction ]:检索或设置对象动画在循环中是否反向运动
[ animation-play-state ]:检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

复合属性。检索或设置对象所应用的动画特效。
如果提供多组属性值,以逗号进行分隔。
对应的脚本特性为animation。

PS:摘自CSS参考手册

其中animation-name,就是可以设定多个关键帧的地方,是决定动画的运动方式。但必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。
如果提供多个属性值,以逗号进行分隔。

Animate.css动画库中flash动画是如下实现:

@-webkit-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-moz-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@-o-keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

@keyframes flash {
	0%, 50%, 100% {opacity: 1;}	
	25%, 75% {opacity: 0;}
}

.flash {
	-webkit-animation-name: flash;
	-moz-animation-name: flash;
	-o-animation-name: flash;
	animation-name: flash;
}

同时在运用动画的元素样式里增加:

animation-duration: 1s;
animation-delay: .2s;
animation-timing-function: ease;
animation-fill-mode: both;

先定义关键帧,再定义所要增加动画的样式。
大家可以在http://chrome.360.cn/history.html查看运用的效果。

关于极速官网首页滚动交互

极速官网首页滚动交互原理是在和WUI、IXD设计师交流后知道,首页滚动时,主导航要固定,主背景和bnr区域中各个图片都要有落差滚动感,滚动到一定高度后次导航要遮住主导航并固定。

写js的逻辑是这样的:首先在滚动时,给主导航增加position:fixed,背景图通过滚动数值重新background-positon,bnr区域的每个图层通过css单独position:fixed定位,只是不写left,top值,然后通过滚动时的数值给bnr区域中每个图层的margin-top附滚动数值乘以一个不同的小数值就能实现各个图层滚动时出现的视觉差异。次导航在滚动到一个固定值时给予position:fixed就固定啦。关键是要平滑,这个就得重写webkit浏览器的滚动事件,还好有现成的就用上了。效果截图:



JS代码:

function bnrSilder() {
    if (!$("#head").length && !$("#bnr").length) {//判断是否有这两个节点,没有则返回
      return;
    }
    (function () {//增加平滑滚动事件js
      if (navigator.userAgent.toLocaleLowerCase().indexOf('opera') >= 0) return;
      var sstag = document.createElement('script');
      sstag.type = 'text/javascript';
      sstag.async = true;
      sstag.src = 'script/SmoothScroll.js';
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(sstag, s);
    })();
    $(window).scroll(function () {//实现各个图层视觉差滚动与主导航、次导航固定
      var bTop = $(this).scrollTop();//获取滚动值
      $('.bnr-box').css({
        'margin-top':-bTop * 0.48
      });
      $('.bnr-txt').css({
        'margin-top':-bTop * 0.68
      });
      $('.bnr-btn').css({
        'margin-top':-bTop * 0.68
      });
      $('.warper').css({
        "background-position":"50% " + bTop * 0.2 + "px"
      });
      if (bTop < 200) {
        $(".txt-warp").css({
          'margin-top':-bTop * 1.5
        });
        $(".txt-nav-warp").removeAttr("style");
      } else {
        $(".txt-warp").css({
          'margin-top':-240
        });
        $(".txt-nav-warp").css({
          "position":"fixed",
          "top":0,
          "left":0,
          "box-shadow":"0 2px 6px #eee"
        });
       }
	  //实现锚点切换的次导航
      var idxs = 0;
      if (bTop >= 200 && bTop < 577) {
        idxs;
      } else if (bTop >= 577 && bTop < 1072) {
        idxs = 1;
      } else if (bTop >= 1072 && bTop < 1165) {
        idxs = 2;
      } else if (bTop >= 1165) {
        idxs = 3;
      }
      $('.txt-nav li a').eq(idxs).addClass('on').parent().siblings().children().removeClass('on');
      if (bTop < 200) {
        $('.txt-nav li a').removeClass('on');
      }
    });
  }

大家也可以访问: http://chrome.360.cn/查看效果

Web前端实现设计时的渐进增强和平稳退化

渐进增强 (Progressive Enhancement)
渐进增强的概念是指从最基本的可用性出发,在保证站点页面在低级浏览器中 的可用性和可访问性的基础上,逐步增加功能及提高用户体验。本质上讲,我们日常的一些开发习惯,例如首先使用标记语言编写页面,然后通过样式表来控制页面 样式等,都属于渐进增强的概念;其他更为明显的行为包括使用HTML5、CSS3等新技术,针对高级浏览器为页面提高用户体验的丰富程度。(来源互联网)

平稳退化(Graceful Degradation)
平稳退化的概念是指首先使用最新的技术面向高级浏览器构建最强的功能及用户体验,然后针对低级浏览器的限制,逐步衰减那些无法被支持的功能及体验;在我们日常的开 发中,一个典型的平稳退化的例子就是首先针对webkit、gecko编写页面代码,然后修复IE中的异常或针对IE去除那些无法被实现的功能特色。(来源互联网)

所以,这两个概念方法其实早已并存在我们的日常开发工作中了,只是“渐进增强”与“平稳退化”这样的措辞是近些年才开始被普及。在我们眼下的HTML5与 CSS3实战中,这两个概念就尤其重要了,怎样保证使用不断变化的新技术来构建在主流浏览器下都具有基本可用性的站点,并针对高级浏览器进行体验提升,这些是我们在开发过程中需要明确的思路。(来源互联网)

在这个项目中最有这个的概念理解与实现是极速浏览器官网的历程页面的交互展现。效果是通过Animate.css动画实现的。在页面加载后,大概有600ms的延长显示历程列表类似落珠效果。效果图:

这三个图是页面刚开始加载完后,600ms后动画执行中的截图。可能不是很明确。大家可以看通过这个(http://chrome.360.cn/history.html)看到在极速浏览器下,有落珠反弹效果,而ie系列下,是没有落珠反弹效果的,只是很自然的展开而已。

其他的还有CSS3中的border-radius、text-shadow、box-shadow、选择器与伪类等等。这些地方的运用,有时只要增加一句简单的样式,其用户体验就提高很多。

维护性、性能

在接到此项目时,考虑到今后的维护修改频率,从而以极速浏览器官网导航为文件层次架构。

其中script文件夹存放整个项目所用到的js文件,images文件夹存放临时性图片文件。重点说下style文件夹:其文件夹根据每个Html文件对应一个样式文件和一个公共样式文件common.css,其中的img文件夹所存放的为样式图片。Common.css包含在每个样式文件中,通过import导入,common.css包含reset样式、通用头部样式、弹出层样式等。

这样的结构易于页面快速加载呈现和后期样式修改、维护上的成本降低很多,而且不会牵扯到其他样式冲突。

性能这块,网上太多了。主要的就是精减代码CSS Sprites为图片指定宽度与高度启用Keep-Alive属性使用浏览器缓存启用GZIP压缩

前端速度优化方面还有很多工作可以去做,例如大公司都启用了CDN加速,你的图片也可以进行无损压缩,CSS、JS文件都可以用一些专业的工具去压缩,在你网页的head标头要声明字符集,尽量少用重定向,指定Last-Modified 或 ETag 标头等,当然这些都多少涉及了一些技术方面的问题,做页面前端优化是一个系统的工程,是需要技术、SEO、运维等去配合完成的,不过这个投入是绝对值得的。

到此,整个极速官网创新运用就这些啦!大家在浏览之后要是有什么要交流的欢迎留言评论。而且整站在上线后的反馈还是不错的,不论是用户还是领导。再次很感谢部门其他前端童鞋,在我对逻辑思路不通畅时,给予很大的帮助与支持。

浏览 (29,744) 评论 (8)