幻灯片/轮播

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

也想出现在这里?联系我们
创客主机


这是一款基于 SVG clipPath 的预览图变形特效幻灯片。该幻灯片特效结合 SVG 和 clipPath 元素制作路径变形动画,在幻灯片前后切换时,前后预览图平滑的变形过渡到屏幕中间。该幻灯片特效的 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. <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">
  2.  <div class="gallery-wrapper">
  3.  <ul class="gallery">
  4.  <li class="left">
  5.  <div class="svg-wrapper">
  6.  <svg viewBox="0 0 800 800">
  7.  <title>Animated SVG</title>
  8.  <defs>
  9.  <clipPath id="cd-image-1">
  10.  <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"/>
  11.  </clipPath>
  12.  </defs>
  13.  
  14.  <image height='800px' width="800px" clip-path="url(#cd-image-1)" xlink:href="img/img-01.jpg"></image>
  15.  <use xlink:href="#cd-morphing-path-1" class="cover-layer" />
  16.  </svg>
  17.  </div> <!-- .svg-wrapper -->
  18.  </li>
  19.  
  20.  <li class="selected">
  21.  <div class="svg-wrapper">
  22.  <svg viewBox="0 0 800 800">
  23.  <title>Animated SVG</title>
  24.  <defs>
  25.  <clipPath id="cd-image-2">
  26.  <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"/>
  27.  </clipPath>
  28.  </defs>
  29.  
  30.  <image height='800px' width="800px" clip-path="url(#cd-image-2)" xlink:href="img/img-02.jpg"></image>
  31.  <use xlink:href="#cd-morphing-path-2" class="cover-layer" />
  32.  </svg>
  33.  </div> <!-- .svg-wrapper -->
  34.  </li>
  35.  
  36.  <!-- other slides here -->
  37.  </ul>
  38.  
  39.  <nav>
  40.  <ul class="navigation">
  41.  <li><a href="#0" class="prev">Prev</a></li>
  42.  <li><a href="#0" class="next">Next</a></li>
  43.  </ul>
  44.  </nav>
  45.  </div>
  46.  
  47.  <ul class="caption">
  48.  <li class="left">Lorem ipsum dolor</li>
  49.  <li class="selected">Consectetur adipisicing elit</li>
  50.  <!-- other captions here -->
  51.  </ul>
  52. </div> <!-- .cd-svg-clipped-slider -->

CSS 样式:

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

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

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

  1. .cd-svg-clipped-slider .gallery li.selected {
  2.  /* slide in the center */
  3.  position: relative;
  4.  z-index: 3;
  5.  opacity: 1;
  6.  transform: translateX(0) scale(1);
  7. } 
  8.  
  9. .left和.right class用于在当前图片的左右两侧显示前后预览图片。.left class的另一个作用是将预览图片移动到左侧。
  10. .cd-svg-clipped-slider .gallery li.left {
  11.  /* slides on the left */
  12.  transform: translateX(-75%) scale(0.4);
  13. }
  14. .cd-svg-clipped-slider .gallery li.left, 
  15. .cd-svg-clipped-slider .gallery li.right {
  16.  /* .right -> slide visible on the right */
  17.  z-index: 2;
  18.  opacity: 1;
  19. }

当一个新的幻灯片 slide 被选择的时候,元素用于剪裁图片,如果是当前选择的图片,则完全显示,左右两侧的预览图则只显示一部分。另外,上面的这些 class 类页用于控制图片的描述信息的显示和隐藏。默认情况下,图片的描述信息也是被隐藏和移动到屏幕的右侧。.selected class 用于显示当前被选择的图片的描述信息,.left class 用于隐藏描述信息,并将它们移动到屏幕的左侧。

  1. .cd-svg-clipped-slider .caption li {
  2.  /* slide titles */
  3.  position: absolute;
  4.  z-index: 1;
  5.  top: 0;
  6.  left: 0;
  7.  text-align: center;
  8.  width: 100%;
  9.  transform: translateX(100px);
  10.  opacity: 0;
  11.  transition: opacity .3s, transform .3s ease-in-out;
  12. }
  13. .cd-svg-clipped-slider .caption li.selected {
  14.  /* slide visible in the center */
  15.  z-index: 2;
  16.  position: relative;
  17.  transform: translateX(0);
  18.  opacity: 1;
  19. }
  20. .cd-svg-clipped-slider .caption li.left {
  21.  /* slide hidden on the left */
  22.  transform: translateX(-100px);
  23. }

JavaScript:

该幻灯片特效的 jQuery 代码中创建了一个 svgClippedSlider 对象,并通过 bindEvents()方法来绑定事件。

  1. function svgClippedSlider(element) {
  2.  this.element = element;
  3.  this.slidesGallery = this.element.find('.gallery').children('li');
  4.  this.slidesCaption = this.element.find('.caption').children('li');
  5.  this.slidesNumber = this.slidesGallery.length;
  6.  this.selectedSlide = this.slidesGallery.filter('.selected').index();
  7.  // ....
  8.  
  9.  this.bindEvents();
  10. }
  11.  
  12. svgClippedSlider.prototype.bindEvents = function() {
  13.  var self = this;
  14.  //detect click on one of the slides
  15.  this.slidesGallery.on('click', function(event){
  16.  if( !$(this).hasClass('selected') ) {
  17.  //determine new slide index and show it
  18.  var newSlideIndex = ( $(this).hasClass('left') )
  19.  ? self.showPrevSlide(self.selectedSlide - 1)
  20.  : self.showNextSlide(self.selectedSlide + 1);
  21.  }
  22.  });
  23. }

showPrevSlide 和 showNextSlide 用于显示前一个和下一个幻灯片。这些函数用于为指定的幻灯片图片的描述信息添加和移除相应的 class 类,并修改<clipPath>元素中的<path>元素的 d 属性,用来对图片制作路径剪裁。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!