好看的动漫html页面,漂亮的页面过渡动画

HTML

HTML结构中，.cd-main包含页面主体内容，.cd-side-navigation包含着侧边导航条，#cd-loading-bar则是用来做进度条动画用的。

• Intro

Animated Page Transition #2

Some text here

Scroll Down

CSS

我们将.cd-side-navigation固定在页面左侧，并且设置它的高度为100%，这样左侧导航菜单就始终占据左侧边栏，右侧主体内容滚动时，左侧导航菜单不动。

.cd-side-navigation {

position: fixed;

z-index: 3;

top: 0;

left: 0;

height: 100vh;

width: 94px;

overflow: hidden;

}

.cd-side-navigation ul {

height: 100%;

overflow-y: auto;

}

.cd-side-navigation::before {

/* background color of the side navigation */

content: '';

position: absolute;

top: 0;

left: 0;

height: 100%;

width: calc(100% - 4px);

background-color: #131519;

}

.cd-side-navigation li {

width: calc(100% - 4px);

}

.cd-side-navigation a {

display: block;

position: relative;

}

.cd-side-navigation a::after {

/* 4px line to the right of the item - visible on hover */

content: '';

position: absolute;

top: 0;

right: -4px;

height: 100%;

width: 4px;

background-color: #83b0b9;

opacity: 0;

}

.no-touch .cd-side-navigation a:hover::after {

opacity: 1;

}

JavaScript

当我们点击左侧菜单时，调用triggerAnimation()函数，这个函数会触发加载进度条动画函数loadingBarAnimation()，接着加载页面内容函数：loadNewContent()。

function loadingBarAnimation() {

var scaleMax = loadingBar.data('scale');

if( scaleY + 1 < scaleMax) {

newScaleValue = scaleY + 1;

}

// ...

loadingBar.velocity({

scaleY: newScaleValue

}, 100, loadingBarAnimation);

}

当新页面被选中时，一个新的元素.cd-section将会被创建并且插入到DOM中，然后load()新的url内容。

function loadNewContent(newSection) {

var section = $('').appendTo(mainContent);

//load the new content from the proper html file

section.load(newSection+'.html .cd-section > *', function(event){

loadingBar.velocity({

scaleY: scaleMax //this is the scaleY value to cover the entire window height (100% loaded)

}, 400, function(){

section.addClass('visible');

var url = newSection+'.html';

if(url!=window.location){

//add the new page to the window.history

window.history.pushState({path: url},'',url);

}

// ...

});

});

}

通过异步加载的页面要返回上一页历史浏览记录的话，可以点击浏览器上的返回即可。返回上一页同样有过渡动画效果。