html 视差效果,网页视差效果精品教程：具有视差效果的标签页切换

今天要向大家分享的是一个简单的具有视差效果的标签页切换技术。我们使用CSS动画技术，控制标签页切换时产生的动画动作，通过背景图的移动，让浏览者感觉到神奇的视差效果。

本教程是受Kendo UI的启发，它是一个HTML UI框架。在经过研究之后，我们最终决定仿制出这种效果。

观看演示

工作原理

显示的内容由多个标签页组成，每个里面都有一个H2元素，一个文字段落，一个链接和一张图片：

Some headline

Some description

Read more

关键是标签页切换时的动画。我们通过给每个标签页一个“方向类”来控制它们。例如，如果我们要把当前标签页向右滑动，我们就给它一个“da-slide-toright”类。这里有4个不同的css类，每个负责一种可能运动方向。

.da-slide-fromright

.da-slide-fromleft

.da-slide-toright

.da-slide-toleft

对于这些css类，我们设计出各种不同的动画效果：

/* Slide in from the right*/

.da-slide-fromright h2{

animation: fromRightAnim1 0.6s ease-in 0.8s both;

}

.da-slide-fromright p{

animation: fromRightAnim2 0.6s ease-in 0.8s both;

}

.da-slide-fromright .da-link{

animation: fromRightAnim3 0.4s ease-in 1.2s both;

}

.da-slide-fromright .da-img{

animation: fromRightAnim4 0.6s ease-in 0.8s both;

}

/* Adjust animations for different behavior of each element: */

@keyframes fromRightAnim1{

0%{ left: 110%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim2{

0%{ left: 110%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim3{

0%{ left: 110%; opacity: 0; }

1%{ left: 10%; opacity: 0; }

100%{ left: 10%; opacity: 1; }

}

@keyframes fromRightAnim4{

0%{ left: 110%; opacity: 0; }

100%{ left: 60%; opacity: 1; }

}

动画选项

这些动画是可以调整的，我们提供了一些参数选项：

$('#da-slider').cslider({

current: 0,

// index of current slide

bgincrement: 50,

// increment the background position

// (parallax effect) when sliding

autoplay: false,

// slideshow on / off

interval: 4000

// time between transitions

});

视差效果是通过将背景图向内容页移动方向的反向移动获得的。通过bgincrement参数，你可以控制移动的像素点。

观看演示

需要注意的是，我们的代码里包含的对那些不支持CSS3动画和变换的浏览器的应变处理。

希望你能从我们的这个小例子中学到一些有用的东西！