jquery实现漂亮的页面|jquery实现漂亮的页面过渡动画效果

时间:2020-03-15  来源:jquery  阅读:

通过点击页面侧边菜单,对应的页面加载时伴随着滑动过渡动画,还带进度条效果的。当然页面的加载是Ajax驱动的,整个加载过渡过程非常流畅,非常好的用户体验。

js页面过度效果

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

 代码如下
 

   

       

           
               

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);
            }
 
            // ...
        });
    });
}

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

jquery实现漂亮的页面|jquery实现漂亮的页面过渡动画效果

http://m.bbyears.com/wangyezhizuo/87282.html

推荐访问:
相关阅读 猜你喜欢
本类排行 本类最新