幻灯片/轮播

基于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)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!