带淡入淡出效果的纯CSS3滚动视觉差特效

这是一款使用纯CSS3制作的带淡入淡出效果的滚动视觉差特效。该视觉差特效在页面加载时，图片有淡入淡出的效果。当页面滚动时，背景图片会有非常炫酷的视觉差效果。

使用方法

HTML结构

该视觉差效果的HTML结构如下：

<div class="gridContainer clearfix">
  <div id="Wrapper">
    <h1>主标题</h1>
    <section class="parallax">
      <div class="parallax-content">

        <h2>段落标题-1</h2>
        <p>......</p>
      </div>
    </section>

    <section class="parallax-section-two">
      <h3>段落标题-2</h3>
      <p>......</p>
    </section>

    <section class="parallax">
      <div class="parallax-footer">
        <p>......</p>
      </div>
    </section>
  </div>
</div>              
                

CSS样式

为了制作响应式效果，整个容器使用百分比作为尺寸单位。

.gridContainer {
  margin-left: auto;
  margin-right: auto;
  width: 87.36%;
  padding-left: 1.82%;
  padding-right: 1.82%;
}                 
                

次级容器左浮动,宽度为父容器的100%，并清除左右两侧的浮动。

#Wrapper {
  clear: both;
  float: left;
  margin-left: 0;
  width: 100%;
  display: block;
}                 
                

该视觉差特效主要在标题元素上制作。主标题H1元素被用来做第一个视觉差效果。标题H1被设置了一个固定的background，并且它的padding-top和padding-bottom分别为父容器的25%高度，用于撑开空间。同时为它设置了3秒钟的fadein动画。该动画用于修改背景图片的透明度，使背景动画有淡入淡出的效果。

h1 {
  text-align: center;
  font-size: 300%;
  color: #ffffff;
  letter-spacing: 1%;
  margin: 0 0;
  background: url("../img/1.jpg") fixed 100%;
  padding-top: 25%;
  padding-bottom: 25%;
  -webkit-animation: fadein 3s;
  -moz-animation: fadein 3s;
  -ms-animation: fadein 3s;
  -o-animation: fadein 3s;
  animation: fadein 3s;
} 
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}                 
                

其它的用于设置内容的常规CSS代码如下：

.parallax {
  background-color: #3a3e2d;
}
/*Parallax Section One*/
.parallax-content {
  padding-top: 10%;
  padding-bottom: 10%;
}

.parallax-content h2
/*Section One Style*/
{
  text-align: center;
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  font-size: 275%;
  color: #ffffff;
  letter-spacing: 1%;
}

.parallax-content p
/*Section One Paragraph*/
{
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  color: #ffffff;
  padding: 10px;
}


/*Footer Section*/
.parallax-footer {
  padding-top: 5%;
  padding-bottom: 5%;
}

.parallax-footer p
/*Section One and Footer Paragraph*/
{
  font-family: Futura, "Trebuchet MS", Arial, sans-serif;
  text-align: Center;
  color: #ffffff;
  padding: 10px;
}                  
                

最后通过媒体查询来制作响应式布局效果。

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
@media only screen and (min-width: 481px) {
  .gridContainer {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
  }
  #Wrapper {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
@media only screen and (min-width: 769px) {
  .gridContainer {
    width: 88.2%;
    max-width: 1232px;
    padding-left: 0.9%;
    padding-right: 0.9%;
    margin: auto;
  }
  #Wrapper {
    clear: both;
    float: left;
    margin-left: 0;
    width: 100%;
    display: block;
  }
}