基于SVG路径动画的全屏模态窗口特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款基于SVG路径动画的全屏模态窗口特效。该模态窗口通过同时动画多个SVG路径，制作出非常时尚的模态窗口背景展开动画效果。

使用方法

HTML结构

该SVG模态窗口特效的HTML结构分为2个部分：一个用于包裹触发模态窗口的按钮的<section>元素，和模态窗口div.cd-modal，模态窗口中又包含内容部分.cd-modal-content和用于制作背景动画的div.cd-svg-bg。

<main class="cd-main-content">
  <section class="center">
    <h1>SVG Modal Window</h1>
    <a href="#0" class="cd-btn" id="modal-trigger" data-type="cd-modal-trigger">Fire Modal Window</a>
  </section>
</main> <!-- .cd-main-content -->
 
<div class="cd-modal" data-modal="modal-trigger">
  <div class="cd-svg-bg" data-step1="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z" data-step2="M33.8,690l-188.2-300.3c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1L959.6,110c0.1,0.1,0,0.3-0.1,0.3 L34.1,690.1C34,690.2,33.9,690.1,33.8,690z" data-step3="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z" data-step4="M-329.3,504.3l-272.5-435c-0.1-0.1,0-0.3,0.1-0.3l925.4-579.8c0.1-0.1,0.3,0,0.3,0.1l272.5,435c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-329,504.5-329.2,504.5-329.3,504.3z" data-step5="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z" data-step6="M476.4,1013.4L205,580.3c-0.1-0.1,0-0.3,0.1-0.3L1130.5,0.2c0.1-0.1,0.3,0,0.3,0.1l271.4,433.1c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C476.6,1013.6,476.5,1013.5,476.4,1013.4z">
    <svg height="100%" width="100%" preserveAspectRatio="none" viewBox="0 0 800 500">
      <title>SVG Modal background</title>
      <path id="cd-changing-path-1" d="M-59.9,540.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L864.8-41c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L-59.5,540.6 C-59.6,540.7-59.8,540.7-59.9,540.5z"/>
      <path id="cd-changing-path-2" d="M-465.1,287.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L459.5-294c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3 l-925.4,579.8C-464.9,287.7-465,287.7-465.1,287.5z"/>
      <path id="cd-changing-path-3" d="M341.1,797.5l-0.9-1.4c-0.1-0.1,0-0.3,0.1-0.3L1265.8,216c0.1-0.1,0.3,0,0.3,0.1l0.9,1.4c0.1,0.1,0,0.3-0.1,0.3L341.5,797.6 C341.4,797.7,341.2,797.7,341.1,797.5z"/>
    </svg>
  </div>
 
  <div class="cd-modal-content">
    <!-- modal content here -->
  </div> <!-- cd-modal-content -->
 
  <a href="#0" class="modal-close">Close</a>
</div> <!-- cd-modal -->
 
<div class="cd-cover-layer"></div> <!-- .cd-cover-layer -->

div.cd-cover-layer用于在模态窗口触发的时候对主内容部分进行遮罩。

CSS样式

.cd-modal元素开始时被设置为visibility: hidden，高度和宽度都为100%，并且是固定定位方式。

当用户点击了触发按钮a#modal-trigger，模态窗口的可见性通过.modal-is-visible修改为可见。

.cd-modal {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  visibility: hidden;
  transition: visibility 0s 0.6s;
}
.cd-modal.modal-is-visible {
  visibility: visible;
  transition: visibility 0s 0s;
}

为了创建模态窗口背景的覆盖效果，特效中对div.cd-svg-bg > svg元素中的<path>元素的d属性进行了动画。

在模态窗口被触发的时候，.cd-cover-layer层变为可见。它位于模态窗口背景层的下面。模态窗口中的文字颜色和.cd-cover-layer层的颜色相同，这样在动画的时候，只有经过蓝色路径的文字才可见。

当用户点击了a#modal-trigger按钮的时候，.modal-is-visible class被添加到.cd-cover-layer和.cd-modal上。这个class会将.cd-cover-layer的透明度从0修改为1，以及visibility修改为可见，这样使.cd-cover-layer层完全覆盖主页面的内容。

.cd-cover-layer {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #f2f2f2;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s 0.3s, visibility 0s 0.6s;
}
.cd-cover-layer.modal-is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s 0s, visibility 0s 0s;
}

当.cd-cover-layer的透明度动画过渡结束的时候，.cd-modal-content的透明度从0设置为1。

.cd-modal-content {
  color: #f2f2f2;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.3s 0s, transform 0.3s 0s;
}
.modal-is-visible .cd-modal-content {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

由于.cd-modal-content的文字颜色和.cd-cover-layer的背景颜色相同，所以唯一可见的内容是蓝色的SVG背景经过的地方。

JavaScript

为了制作模态窗口背景动画，特效中对3个SVG的<path>元素的d属性进行了动画。

这里制作路径元素动画是使用Snap.svg提供的animate()方法。

modalTrigger.on('click', function(event){ //modalTrigger =  $('a[data-type="cd-modal-trigger"]')
  event.preventDefault();
  $([modal.get(0), coverLayer.get(0)]).addClass('modal-is-visible'); //modal = $('.cd-modal'), coverLayer = $('.cd-cover-layer')
  animateModal(pathsArray, pathSteps, duration, 'open');
});
 
function animateModal(paths, pathSteps, duration, animationType) {
  var path1 = ( animationType == 'open' ) ? pathSteps[1] : pathSteps[0], // pathSteps[n] = $('.cd-svg-bg').data('step'+(n+1));
    path2 = ( animationType == 'open' ) ? pathSteps[3] : pathSteps[2],
    path3 = ( animationType == 'open' ) ? pathSteps[5] : pathSteps[4];
  paths[0].animate({'d': path1}, duration, firstCustomMinaAnimation); //paths[0] = Snap('#cd-changing-path-1')
  paths[1].animate({'d': path2}, duration, firstCustomMinaAnimation); //paths[1] = Snap('#cd-changing-path-2')
  paths[2].animate({'d': path3}, duration, firstCustomMinaAnimation); //paths[2] = Snap('#cd-changing-path-3')
}