浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2017-03-23

人气6768

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款基于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文件。

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:90.12KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2060.html 非特殊说明,本文版权归原作者所有,转载请注明出处
HTML5 SVG超酷雷达扫描式页面切换特效

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有0 评论)