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

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

制作方法

HTML结构

该页面切换特效使用嵌套

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

Page 1

...

1

2

...

• ...

页面的基本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文件。