炫意html5
最早CSS3和HTML5移动技术网站之一

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

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

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

工作原理

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

<div id="da-slider" class="da-slider">
<div class="da-slide">
<h2>Some headline</h2>
<p>Some description</p>
<a href="#" class="da-link">Read more</a>
<div class="da-img">
<img  data-original="images/1.png" alt="image01" />
</div>
</div>
<div class="da-slide">
<!-- ... -->
</div>
<!-- ... -->
<nav class="da-arrows">
<span class="da-arrows-prev"></span>
<span class="da-arrows-next"></span>
</nav>
</div>

关键是标签页切换时的动画。我们通过给每个标签页一个“方向类”来控制它们。例如,如果我们要把当前标签页向右滑动,我们就给它一个“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动画和变换的浏览器的应变处理。

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

炫意HTML5 » 网页视差效果精品教程:具有视差效果的标签页切换

Java基础教程Android基础教程