基于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 相关文章推荐
javascript 框架小结 个人工作经验
Jun 13 Javascript
FireFox下XML对象转化成字符串的解决方法
Dec 09 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
Apr 02 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
jQuery插件WebUploader实现文件上传
Nov 07 Javascript
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
浅谈微信页面入口文件被缓存解决方案
Sep 29 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
vue实现输入框自动跳转功能
May 20 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
Mar 01 Vue.js
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
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
php中数字0和空值的区别分析
2014/06/05 PHP
JS类的封装及实现代码
2009/12/02 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
jquery text(),val(),html()方法区别总结
2013/11/04 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
2015/02/28 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
2015/09/14 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
jquery.validate.js 多个相同name的处理方式
2017/07/10 jQuery
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
详解VUE项目中安装和使用vant组件
2019/04/28 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
Python实现简易过滤删除数字的方法小结
2019/01/09 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
Python 闭包,函数分隔作用域,nonlocal声明非局部变量操作示例
2019/10/14 Python
python实现简易淘宝购物
2019/11/22 Python
Python龙贝格法求积分实例
2020/02/29 Python
解决Alexnet训练模型在每个epoch中准确率和loss都会一升一降问题
2020/06/17 Python
基于Python实现体育彩票选号器功能代码实例
2020/09/16 Python
商务日语毕业生自荐信范文
2013/11/14 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
公司口号大全
2014/06/11 职场文书
应用心理学专业求职信
2014/08/04 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js