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

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

使用方法

HTML结构

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

主标题

段落标题-1

......

段落标题-2

......

......

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;

}

}