网页视差效果精品教程:具有视差效果的标签页切换
今天要向大家分享的是一个简单的具有视差效果的标签页切换技术。我们使用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 src="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动画和变换的浏览器的应变处理。
希望你能从我们的这个小例子中学到一些有用的东西!
阅读余下内容
可以将这个视差效果的源码发我一份吗,如果的可以的话,就发到我的邮箱 huangzuduan@qq.com ,谢谢你了
你好,我想知道这些内容是你自己原创的,还是翻译的呢?
如果是翻译的,那么您主要是从哪里得到的这些好资源呢,能否分享一下?
我发现“需要注意的是,我们的代码里包含的对那些不支持CSS3动画和变换的浏览器的应变处理。”这句,好像是翻译的结果。
根据内容,我理解是代码里没有作CSS3兼容处理。
csfdsfdhbgf