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

作者: 来源: 更新时间:2012-10-15 10:54:29 点击:
网页制作文章简介:这个页面用到了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(格式化样式表/upload/201210/20121015105428pz7.png” alt=”sothink Html5-Act”/></header>
2.视差背景部分
这部分内容是用绝对定位脱离了文档流的,我们来看看结构和CSS代码:
XHTML结构:

$(‘#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:

fadeIn();

(由于7,8浏览器对PNG滤镜效果支持不乐观,我们通过调用checkB()函数判断客户端浏览器并指定了一些高级浏览器拥有该效果,而放弃了IE7,IE8以下的浏览器。这里调用了jquery的fadeIn和fadeOut效果用来达到动画效果)
B:再来看社交分享内容的动画,当鼠标指向隐藏一半的图像,会全部露出来。这里其实用到的是一个jquery的背景位置变换的插件jquery.background.js,再通过设置mouseover和mouseout两种状态下图片所处背景的不同位置达到动画效果,当然这个动画的持续时间可以通过duration参数设置。然后我们来看代码

CSS:

}

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"); }