html5+css3网页制作实例:制作comingsoon页面

2012-10-11 01:53:49  来源:青蛙国度 

网页制作Webjx文章简介:这个页面用到了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+One|McLaren|Rye|Dancing+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=”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,再通过设置mouseovermouseout两种状态下图片所处背景的不同位置达到动画效果,当然这个动画的持续时间可以通过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");
        }
更多