基于SVG clipPath的预览图变形特效幻灯片

svg 幻灯片 剪裁路径 2016-07-28

控件介绍
这是一款基于SVG clipPath的预览图变形特效幻灯片。该幻灯片特效结合SVG和clipPath元素制作路径变形动画,在幻灯片前后切换时,前后预览图平滑的变形过渡到屏幕中间。
浏览器兼容

支持IE9+

演示下载 909
使用方法

该幻灯片特效的SVG动画使用Snap.svg来制作。

使用方法

HTML结构

该幻灯片特效的HTML结构包含3个无序列表:一个是ul.gallery,一个ul.navigation是前后导航缩略图,ul.caption是各个图片的描述信息。

ul.gallery中的每一个列表项由一个.svg-wrapper元素来包裹一个<svg>元素。在<svg>元素中又包含一个<clipPath>元素,它用于改变图片的剪裁区域。还有一个<image>元素,它的clip-path属性的URL指向<clipPath>元素的ID。最后还有一个<use>元素,它的xlink:href属性指向<clipPath>元素中<path>路径的ID。

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="cd-svg-clipped-slider" data-selected="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z" data-lateral="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z">
  <div class="gallery-wrapper">
    <ul class="gallery">
      <li class="left">
        <div class="svg-wrapper">
          <svg viewBox="0 0 800 800">
            <title>Animated SVG</title>
            <defs>
              <clipPath id="cd-image-1">
                <path id="cd-morphing-path-1" d="M795.796,389.851L410.149,4.204c-5.605-5.605-14.692-5.605-20.297,0L4.204,389.851 c-5.605,5.605-5.605,14.692,0,20.297l385.648,385.648c5.605,5.605,14.692,5.605,20.297,0l385.648-385.648 C801.401,404.544,801.401,395.456,795.796,389.851z"/>
              </clipPath>
            </defs>
             
            <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="img/img-01.jpg"></image>
            <use xlink:href="#cd-morphing-path-1" class="cover-layer" />
          </svg>
        </div> <!-- .svg-wrapper -->
      </li>
  
      <li class="selected">
        <div class="svg-wrapper">
          <svg viewBox="0 0 800 800">
            <title>Animated SVG</title>
            <defs>
              <clipPath id="cd-image-2">
                <path id="cd-morphing-path-2" d="M780,0H20C8.954,0,0,8.954,0,20v760c0,11.046,8.954,20,20,20h760c11.046,0,20-8.954,20-20V20 C800,8.954,791.046,0,780,0z"/>
              </clipPath>
            </defs>
             
            <image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="img/img-02.jpg"></image>
            <use xlink:href="#cd-morphing-path-2" class="cover-layer" />
          </svg>
        </div> <!-- .svg-wrapper -->
      </li>
  
      <!-- other slides here -->
    </ul>
     
    <nav>
      <ul class="navigation">
        <li><a href="#0" class="prev">Prev</a></li>
        <li><a href="#0" class="next">Next</a></li>
      </ul>
    </nav>
  </div>
  
  <ul class="caption">
    <li class="left">Lorem ipsum dolor</li>
    <li class="selected">Consectetur adipisicing elit</li>
    <!-- other captions here -->
  </ul>
</div> <!-- .cd-svg-clipped-slider -->           
CSS样式

默认情况下,ul.gallery中的所有列表元素都使用绝对定位方式,并且透明度都设置为0,并使用translateX()函数将它们移动到右边,同时将它们缩小为0.4倍。

1
2
3
4
5
6
7
8
9
10
11
12
.cd-svg-clipped-slider .gallery li {
  /* slider images */
  position: absolute;
  z-index: 1;
  top: 0;
  left: 25%;/* (100% - width)/2 */
  width: 50%;
  height: 100%;
  opacity: 0;
  transform: translateX(75%) scale(0.4);
  transition: opacity .3s, transform .3s ease-in-out;
}                 

当前被选择的图片会被添加.selected class类,该class类将图片移动会屏幕的中间,同时对它进行放大操作。

1
2
3
4
5
6
7
.cd-svg-clipped-slider .gallery li.selected {
  /* slide in the center */
  position: relative;
  z-index: 3;
  opacity: 1;
  transform: translateX(0) scale(1);
}                 

.left.right class用于在当前图片的左右两侧显示前后预览图片。.left class的另一个作用是将预览图片移动到左侧。

1
2
3
4
5
6
7
8
9
10
.cd-svg-clipped-slider .gallery li.left {
  /* slides on the left */
  transform: translateX(-75%) scale(0.4);
}
.cd-svg-clipped-slider .gallery li.left,
.cd-svg-clipped-slider .gallery li.right {
  /* .right -> slide visible on the right */
  z-index: 2;
  opacity: 1;
}              

当一个新的幻灯片slide被选择的时候,<path>元素用于剪裁图片,如果是当前选择的图片,则完全显示,左右两侧的预览图则只显示一部分。

另外,上面的这些class类页用于控制图片的描述信息的显示和隐藏。默认情况下,图片的描述信息也是被隐藏和移动到屏幕的右侧。.selected class用于显示当前被选择的图片的描述信息,.left class用于隐藏描述信息,并将它们移动到屏幕的左侧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.cd-svg-clipped-slider .caption li {
  /* slide titles */
  position: absolute;
  z-index:

本文转载请注明出处:http://www.zhuiye.com/detail_963.html