html5如何运用fixed,html5特效 - 使用fixed repeat实现有视觉误差的效果

作者idatafox.com

我们尝试实现文字在一张图的上面划过的效果，通常情况下，我们设置背景图片后，图片与之上的文字是同步移动的，这次要把图片固定，实现只移动文字的效果。

在这里首先要说的是white-space:pre;

上面的CSS设置，可以确保这里的源代码展示按照原始的行进行换行，否则，就成了一行了，那么代码

基本就丧失了可读性，所以遇到使用jQuery text()方法的时候，切换到源码看的时候，会发现没有了换行

所有的代码都在一行里，怎么办，就需要使用上面的white-space:pre; 属性。

效果展示

视觉效果误差 - 效果展示

请在非IE浏览器下，运行效果。

实现思路

我们想实现的效果是让背景图片固定，然后让其上的文字移动，就是背景图片不移动，但是文字移动的

视觉效果，比如下面的代码片段，我们把页面分成了上，中，下三部分，我们会在section部分添加背景图片，然后效果就是www.idatafox.com这个网址会在背景图片上不断的滑动的效果:

设置CSS：

上面的CSS中最重要的就是parallax和parallax-inner这两个类是实现特效的关键。

*{

margin:0;

padding:0;

border:0;

}

h1{

texg-align:center;

font-size:575%;

color:#4A4444;

text-transform:uppercase;

letter-spacing:1%;

margin:45% 0;

}

h2{

texg-align:center;

font-size:275%;

color:#e5e5e5;

letter-spacing:1%;

}

.parallax{

background:url("http://www.idatafox.com/images/00.jpg")

repeat fixed 100%;

}

.parallax-inner{

padding-top:10%;

padding-bottom:10%;

}

上面的CSS中最重要的就是parallax和parallax-inner这两个类是实现特效的关键。