HTML5 SVG超酷雷达扫描式页面切换特效

这是一款基于HTML5 SVG的超酷雷达扫描式页面切换jQuery特效。该页面切换特效使用jQuery代码来动态生成svg，并使用velocity.js来驱动SVG完成页面切换时的雷达扫描效果个线条动画。

制作方法

HTML结构

该页面切换特效使用嵌套<div>的HTML结构，每一个div.page是一个页面，.active代表当前页面。用于制作雷达扫描效果的SVG元素是通过jQuery代码动态生成的。rt-point是页面底部的原形导航数字。footer是分页按钮。

<div class="scene">
  <!-- page start -->
  <div class="page page-1 active">
    <div class="page--rotater"></div>
    <div class="page--content">
      <h1>Page 1</h1>
    </div>
  </div>
  <!-- page end -->
  ...
  <div class="rt-point">
    <span class="page-number page-number-1 active">1</span>
    <span class="page-number page-number-2">2</span>
    ...
  </div>
  <!-- footer start -->
  <div class="footer">
    <div class="nav">
      <ul>
        <li class="nav--btn nav--btn-1 active" data-page="1"></li>
        <li class="nav--btn nav--btn-2" data-page="2"></li>
        ...
      </ul>
    </div>
  </div>
  <!-- footer end -->
</div>            
              

页面的基本CSS样式如下：

.scene {
  position: relative;
  height: 100%;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 10rem);
  -webkit-transition: -webkit-transform 0.7s;
          transition: transform 0.7s;
  will-change: transform;
  -webkit-transform-origin: 50% 100%;
      -ms-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.page.inactive {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.page.removing h1 {
  -webkit-transform: translateY(-100%);
      -ms-transform: translateY(-100%);
          transform: translateY(-100%);
  opacity: 0;
}
.page.down {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}
.page.up h1 {
  -webkit-transition: all 0s !important;
          transition: all 0s !important;
}
.page--rotater {
  position: absolute;
  top: -250%;
  left: -175%;
  width: 450%;
  height: 350%;
}
.page--content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 15rem;
  font-size: 3rem;
}
@media (max-width: 990px) {
  .page--content {
    padding: 10rem;
  }
}
.page--content h1 {
  color: #fff;
  font-size: 8rem;
  font-family: SouthRose;
  text-transform: uppercase;
  -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
          transition: transform 0.3s, opacity 0.3s;
  will-change: transform, opacity;
}
.page.page-1 {
  z-index: 10;
}
.page.page-1 .page--rotater {
  background: #922D50;
}
...               
              

特效中使用媒体查询来调整字体大小，制作响应式的效果。

JAVASCRIPT

特效中使用velocity.js来驱动SVG。每一个功能都被封装为一个独立的函数，通过函数的名称你可以大概明白这个函数的作用。具体代码请参考下载文件中的main.js文件。