今天,我们和你分享一个简单的视差内容滑块。使用CSS动画,我们会控制滑块中的每一个元素的动画,并创建一个视差效果带动滑块本身的背景。滑块包含几个幻灯片和每个人会有一个h2元素,一段,一个链接和一个图像:
这个滑块的核心是动画的每一个元素。我们将控制元素的行为给予幻灯片一个各自的方向。例如,当我们向右滑动当前幻灯片,我们将这类“da-slide-toright”。将有四个不同的类为每个可能的滑动方向:.da-slide-fromright.da-slide-fromleft.da-slide-toright.da-slide-toleft鉴于这些类,我们可以控制每个元素的动画:/* 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; }}选项以下选项用cslider插件时可用:$('#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 });视差效应是由移动滑块的背景在滑动时相反的方向 ![jquery内容滑块与延迟动画和背景视差效果]()
在线演示
积分下载
6毛下载
砍两刀下载
文件目录······
