jQuery和css3视觉差幻灯片插件

2019-10-09 10:31:56 作者: 大梦 浏览: 15 [百度未收录] [搜狗已收录] [360已收录]

简要教程

这款插件使用CSS animations来控制幻灯片中的各个动画元素,并使幻灯片的背景产生视觉差效果。

这个效果的灵感来自于Kendo UI主页上的幻灯片效果。

HTML

这个视觉差幻灯片插件的html结构是使用一个容器div包含许多动画元素div da-slide。每一个动画元素div包含一个h2标题、一个用于描述的p元素、一个链接和一个包含图片的div。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="da-slider" class="da-slider">
  <div class="da-slide">
    <h2>Some headlineh2>
    <p>Some descriptionp>
    <a href="http://www.htmleaf.com/" class="da-link">Read morea>
    <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>

这个插件的核心是要使每一个元素都有动画效果。我们通过给每个元素一个“direction class”来控制它们的行为。例如:如果想控制当前元素向右运动,那么给它一个class da-slide-toright”,下面列出了4个方向的class:

  • .da-slide-fromright
  • .da-slide-fromleft
  • .da-slide-toright
  • .da-slide-toleft

上面给定的class通过css来控制它们的运动。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
/* 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; }
}

可用参数

下面是可用的参数选项:

1
2
3
4
5
6
7
8
9
10
11
$('#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
});

版权免责声明 1、本网站名称:罗网轻量级sns社区,源码分享平台
2、本站永久网址:http://www.luopay.cn
3、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
4、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
6、本站资源大多存储在云盘,如发现链接失效  点此反馈 我们会第一时间更新。

下载地址
评论
本文作者 阅读排行 文章推荐

首页
最新
投稿
精选
我的