基于javascript实现漂亮的页面过渡动画效果附源码下载


Posted in Javascript onOctober 26, 2015

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

HTML

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

<nav class="cd-side-navigation"> 
  <ul> 
    <li> 
      <a href="index.html" class="selected" data-menu="index"> 
        <svg><!-- svg content here --></svg> 
        Intro 
      </a> 
    </li> 
    <li> 
      <!-- ... --> 
    </li> 
    <!-- other list items here --> 
  </ul> 
</nav> <!-- .cd-dashboard --> 
<main class="cd-main"> 
  <section class="cd-section index visible"> 
    <header> 
      <div class="cd-title"> 
        <h2>Animated Page Transition #2</h2> 
        <span>Some text here</span> 
      </div> 
      <a href="#index-content" class="cd-scroll">Scroll Down</a> 
    </header> 
    <div class="cd-content" id="index-content"> 
      <!-- content here --> 
    </div> <!-- .cd-content --> 
  </section> <!-- .cd-section --> 
</main> <!-- .cd-main --> 
<div id="cd-loading-bar" data-scale="1" class="index"></div> <!-- lateral loading bar -->

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 = $('<section class="cd-section overflow-hidden '+newSection+'"></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); 
      } 
 
      // ... 
    }); 
  }); 
}

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

Javascript 相关文章推荐
js弹出模式对话框,并接收回传值的方法
Mar 12 Javascript
如何用jquery控制表格奇偶行及活动行颜色
Apr 20 Javascript
Node.js实现简单聊天服务器
Jun 20 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
JavaScript中length属性的使用方法
Jun 05 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Angular1.x复杂指令实例详解
Mar 01 Javascript
js中的DOM模拟购物车功能
Mar 22 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
JS实现简单tab选项卡切换
Oct 25 Javascript
JS实现的页面自定义滚动条效果
Oct 26 #Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
Oct 26 #Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
Oct 26 #Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 #Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 #Javascript
jquery获取url参数及url加参数的方法
Oct 26 #Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
Oct 26 #Javascript
You might like
收音机的保养
2021/03/01 无线电
PHP实现防盗链的方法分析
2017/07/25 PHP
thinkphp集成前端脚手架Vue-cli的教程图解
2018/08/30 PHP
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
控制台报错object is not a function的解决方法
2014/08/24 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
浅谈javascript的调试
2015/01/28 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
ExtJs整合Echarts的示例代码
2018/02/27 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
Javascript类型判断相关例题及解析
2020/08/26 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
python 实现在Excel末尾增加新行
2018/05/02 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
python 写一个水果忍者游戏
2021/01/13 Python
HTML5 预加载让页面得以快速呈现
2013/08/13 HTML / CSS
如何启动时不需输入用户名与密码
2014/05/09 面试题
可贵的沉默教学反思
2014/02/06 职场文书
企业文化标语大全
2014/06/10 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
实习生工作证明范本
2014/09/14 职场文书
2016年优秀共产党员先进事迹材料
2016/02/29 职场文书
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers