| 文章简介：这个页面用到了html5的标签元素和css3的线性渐变、圆角、阴影效果，以及当前流行的parallax视差特效和一些其他结合jquery的动画，在chrome,Safari,opera,firefox下都可以完美显示，如果你还使用IE浏览器，我想效果支持的并不是那么完美，不过尽管这样，我还是对IE6,7,8 |
这个页面用到了html5的标签元素和css3的线性渐变、圆角、阴影效果，以及当前流行的parallax视差特效和一些其他结合jquery的动画，在chrome,Safari,opera,firefox下都可以完美显示，如果你还使用IE浏览器，我想效果支持的并不是那么完美，不过尽管这样，我还是对IE6,7,8做了兼容性处理。
View Demo ,
Download
下面我们就来一步一步的实现这个页面，首先你要准备好设计师设计的PSD文件，并进行精确的切图，我们先来看这个comingsoon页面有哪些文件：
一个index.htm文件
css：
reset.css（格式化样式表http://meyerweb.com/eric/tools/css/reset/）
style.css （网站主要样式表文件）
js：
jquery.jparallax.js支持该页面的视差效果的插件，需要与jquery1.2.6相配套使用，如需更多了解请前往http://webdev.stephband.info/parallax.html 。
jquery.backgroundpos.js jquery的一个背景位置转换插件，用来支持该页面社会分享图标的动画效果。
CheckBrowser.js判断浏览器版本以及客户端设备的文件，用来调试兼容性。
Html5Act-Install.js 加载或启动动画的基础的js文件
image文件夹：包含所有的图片
字体：
我们的设计师设计了手绘字体，为了能让没有安装该字体的用户看到，我们引入了谷歌的字体库并在CSS样式中调用了它。
<link href=’http://fonts.googleapis.com/css?family=Francois+OneMcLarenRyeDancing+Script’ rel=’stylesheet’ type=’text/css’>
头部
我们使用了html5标签<header></header>,对于不支持html5标签的IE浏览器，我们这里通过调用谷歌的html5.js使其支持html5的标签，另外需要在CSS中声明这些元素块状显示，reset.css文件里面已经声明。在index.htm文件<head></head>部分你可以看到这部分代码：
<!–IE fix for HTML5 tags–>
< !–[if lt IE 9]>
< script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”>
< /script>
< ![endif]–>
我们来看代码部分：
<header><img src=http://www.webjx.com/css/”image/logo.png” alt=”sothink Html5-Act”/></header>
2.视差背景部分
这部分内容是用绝对定位脱离了文档流的，我们来看看结构和CSS代码：
XHTML结构：
|
1 2 3 |
|
CSS代码：
|
1 2 3 4 5 6 7 |
|
（我们设置背景层和显示层的z-index属性，并在xhtml结构中按顺序放置相关层来达到堆叠的顺序。）
JS：
|
1 2 |
|
（我们用 jquery.jparallax.js插件结合jquery1.2.6版本来实现这种动画效果，并给背景层和显示层分别不同的位移参数，这是当前比较流行的效果，遗憾的是，IE浏览器对其支持性很差。）
3.主体部分
这个部分包含了即将发布的产品logo,产品的特性，以及邮件收集表单和社交分享几个部分。在这里，我们主要讲其中的2个动画效果和一个按钮三种状态下用CSS3修饰的风格。
A：其中悬浮在LOGO上面的渐显星星用到了fadeIn和fadeOut函数，并结合opacity和filter使其呈现。我们来看代码：
CSS：
| 1 |
|
（首先我们绝对定位它到目标位置）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
（由于7,8浏览器对PNG滤镜效果支持不乐观，我们通过调用checkB()函数判断客户端浏览器并指定了一些高级浏览器拥有该效果，而放弃了IE7,IE8以下的浏览器。这里调用了jquery的fadeIn和fadeOut效果用来达到动画效果）
B：再来看社交分享内容的动画，当鼠标指向隐藏一半的图像，会全部露出来。这里其实用到的是一个jquery的背景位置变换的插件jquery.background.js，再通过设置mouseover和mouseout两种状态下图片所处背景的不同位置达到动画效果，当然这个动画的持续时间可以通过duration参数设置。然后我们来看代码
CSS:
|
1 2 3 4 |
|
（在这里，我们通过给a元素转换成块状元素，然后设置一个负值，使其露出一半的图像）
JS：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
（设置mouseover和mouseout两种状态下的背景位置差值，以达到动画效果，持续时间可以自己设置。）
xhtml:
|
1 2 |
|
C：表单部分：
这个地方我们对提交的按钮用CSS3进行了美化，线性渐变、阴影、圆角效果，我们对其设置了默认，hover和active三种状态下的风格。代码如下：
|
1 2 3 4 |
|
最后，我们为了让这个页面在支持性比较差的IE浏览器中最大化的展现我们页面的效果，我们对其做了一些兼容措施,虽然使用IE6的用户越来越少，我们还是针对IE6做了一些兼容。
1.对于不支持CSS3中线性渐变的IE789浏览器我们这里通过设置ie的属性filter使其呈现效果。
| 1 |
|
2.我们在head部分通过if条件语句引用了一个ie.css，
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
3.对于不支持ie6下png透明我们在head头部使用if条件语句引用了js文件
<!–[if IE 6]>
< script src=”js/DD_belatedPNG.js”>
< /script>
< script>
DD_belatedPNG.fix(‘.png_bg’);
< /script>
< ![endif]–>
我们通过给PNG图片和以PNG图片为背景的层增加png_bg类，已达到透明目的。
//Png transparent background in ie6
var ua = checkB();
if (ua["isIE6"]) {
$("img,#left-box,#star,#brand,#sharebox,#sharebox ul li,#sharebox ul li a").addClass("png_bg");
}
以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索浏览器
， ie6兼容.png
， background
， html3 css3 js jquery
， px
， 效果
， aircraft
， left
， 视差
Parallax
html5 教程、html、html5开发工具、html5模板、html5从入门到精通，以便于您获取更多的相关知识。