| 文章简介：这个页面用到了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 | </pre> <div id="”backgrounds”"></div> <pre> |
CSS代码：
| 1 2 3 4 5 6 7 | #parallax_back {position:absolute; height:745px; overflow:hidden; left:0; right:0; z-index:1; top:0;} #parallax {position:absolute; width:2500px; height:745px; overflow-x:hidden; left:50%; margin:0 0 0 -1250px; z-index:2; top:0;} #parallax_back #bg-aircraft {width:2200px; height:745px; position:absolute; background:url(../image/bg-aircraft.png) no-repeat center top; left:50%; margin:0 0 0 -1100px;} #parallax #bg-sun {width:2000px; height:745px; position:absolute; background:url(../image/bg-sun.png) no-repeat center top; left:50%; margin:0 0 0 -1000px;} #parallax_back #bg-couldbelow {width:2400px; height:745px; position:absolute; background:url(../image/bg-couldbelow.png) no-repeat center top; left:50%; margin:0 0 0 -1200px;} #parallax #bg-couldabove {width:2400px; height:745px; position:absolute; background:url(../image/bg-couldabove.png) no-repeat center top; left:50%; margin:0 0 0 -1200px;} |
（我们设置背景层和显示层的z-index属性，并在xhtml结构中按顺序放置相关层来达到堆叠的顺序。）
JS：
| 1 2 | $(‘#parallax_back’).jparallax({triggerExposesEdges: true}, {xtravel:0.05, ytravel:0.05}, {xtravel:0.1, ytravel:0.1}, {xtravel:0.15, ytravel:0.15}); $(‘#parallax’).jparallax({triggerExposesEdges: true}, {xtravel:0.1, ytravel:0.1}, {xtravel:0.15, ytravel:0.15}, {xtravel:0.2, ytravel:0.2}); |
（我们用 jquery.jparallax.js插件结合jquery1.2.6版本来实现这种动画效果，并给背景层和显示层分别不同的位移参数，这是当前比较流行的效果，遗憾的是，IE浏览器对其支持性很差。）
3.主体部分
这个部分包含了即将发布的产品logo,产品的特性，以及邮件收集表单和社交分享几个部分。在这里，我们主要讲其中的2个动画效果和一个按钮三种状态下用CSS3修饰的风格。
A：其中悬浮在LOGO上面的渐显星星用到了fadeIn和fadeOut函数，并结合opacity和filter使其呈现。我们来看代码：
CSS：
| 1 | #left-box #star{ width:85px; height:85px; position:absolute; left:128px; top:40px; background:url(../image/star.png) no-repeat} |
（首先我们绝对定位它到目标位置）
| 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 | var left = document.getElementById(‘star’); var steps = 300; /* set the opacity of the element (between 0.0 and 1.0) */ function setOpacity(level) { left.style.opacity = level; left.style.MozOpacity = level; left.style.KhtmlOpacity = level; var ua = checkB(); if ( ua["isIE6"]){ left.style.filter = “alpha(opacity=” + (level * 100) + “);”; } } function fadeIn(){ for (i = 0; i setTimeout(“setOpacity(” + i + “)”, i * 3000); } setTimeout(“fadeOut()”, 2800); } function fadeOut() { for (i = 0; i setTimeout(“setOpacity(” + (1 – i) + “)”, i * 3000); } setTimeout(“fadeIn()”, 2800); } fadeIn(); |
（由于7,8浏览器对PNG滤镜效果支持不乐观，我们通过调用checkB()函数判断客户端浏览器并指定了一些高级浏览器拥有该效果，而放弃了IE7,IE8以下的浏览器。这里调用了jquery的fadeIn和fadeOut效果用来达到动画效果）
B：再来看社交分享内容的动画，当鼠标指向隐藏一半的图像，会全部露出来。这里其实用到的是一个jquery的背景位置变换的插件jquery.background.js，再通过设置mouseover和mouseout两种状态下图片所处背景的不同位置达到动画效果，当然这个动画的持续时间可以通过duration参数设置。然后我们来看代码
CSS:
| 1 2 3 4 | #sharebox .social_list li a{ width:64px; height:64px; display:block; margin:0 auto 4px; } #sharebox .social_list .facebook a {background: url(../image/f1.png) no-repeat left -28px;} #sharebox .social_list .twitter a {background: url(../image/t1.png) no-repeat left -28px;} #sharebox .social_list .youtube a {background: url(../image/y1.png) no-repeat left -28px;} |
（在这里，我们通过给a元素转换成块状元素，然后设置一个负值，使其露出一半的图像）
JS：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(“.social_list li a”).css({“background-position” : “0px 28px”}) .mouseover(function () { $(this).stop().animate({ ‘backgroundPosition’ : “0px 0px” }, {duration:300}) }) .mouseout(function () { $(this).stop().animate({ ‘backgroundPosition’ : “0px 28px” }, {duration:200}) }); }); |
（设置mouseover和mouseout两种状态下的背景位置差值，以达到动画效果，持续时间可以自己设置。）
xhtml:
| 1 2 | </pre> <em></em> |
C：表单部分：
这个地方我们对提交的按钮用CSS3进行了美化，线性渐变、阴影、圆角效果，我们对其设置了默认，hover和active三种状态下的风格。代码如下：
| 1 2 3 4 | #brand .submit_button {font-family:Arial, Helvetica, sans-serif;float: left;width: 6em;border: 1px solid #006656;box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.53) inset;border-radius: 0em 0.3em 0.3em 0em;background: -webkit-linear-gradient(bottom, #02B69A, #01DDBE);background: -moz-linear-gradient(bottom, #02B69A, #01DDBE);background: -o-linear-gradient(bottom, #02B69A, #01DDBE);background: -ms-linear-gradient(bottom, #02B69A, #01DDBE);cursor: pointer;height: 3em;color: white;text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#007db9e8′,GradientType=0 );} #brand .submit_button:hover { background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(255,255,255,.1)), to(rgba(0,0,0,.1)));background-image: -webkit-linear-gradient(bottom, #01DDBE, #02B69A); background-image: -moz-linear-gradient(bottom, #01DDBE, #02B69A); background-image: -ms-linear-gradient(bottom, #01DDBE, #02B69A); background-image: -o-linear-gradient(bottom, #01DDBE, #02B69A);background-image: linear-gradient(bottom, #01DDBE, #02B69A);-moz-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;-webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;box-shadow: 0 1px 2px 0 rgba(0,0,0,.15) inset;filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#01DDBE",endColorstr="#02B69A",GradientType=0 );} #brand .submit_button:active { -moz-box-shadow:0 1px 2px 0 rgba(0,0,0,.15) inset,0 3px 13px 3px rgba(0,0,0,.3) inset; -webkit-box-shadow:0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset; box-shadow:0 1px 2px 0 rgba(0,0,0,.15) inset, 0 3px 13px 3px rgba(0,0,0,.3) inset;color: #ddd;} |
最后，我们为了让这个页面在支持性比较差的IE浏览器中最大化的展现我们页面的效果，我们对其做了一些兼容措施,虽然使用IE6的用户越来越少，我们还是针对IE6做了一些兼容。
1.对于不支持CSS3中线性渐变的IE789浏览器我们这里通过设置ie的属性filter使其呈现效果。
| 1 | filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#01DDBE",endColorstr="#02B69A",GradientType=0 ); |
2.我们在head部分通过if条件语句引用了一个ie.css，
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /*IE6下面不支持fliter的渐变处理*/ #brand .submit_button {background:#02B69A;color:#FFF}/*for ie6*/ /*IE6，7,8下面对其视差效果层显示较差的处理*/ #backgrounds { _display:none;/*for ie6*/ *display:none;/*for ie7*/ position:absolute; top:74px; width:900px; } /*This is because on IE 7 and 8 the text in the input field doesn’t align (vertically) in the center.*/ .email_button { line-height:40px; } |
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"); }
欢迎大家阅读《html5+css3网页制作实例:制作comingsoo…_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码
转载请注明原文链接：html5+css3网页制作实例:制作comingsoo_css
