基于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 相关文章推荐
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
js中this的用法实例分析
Jan 10 Javascript
在JavaScript中访问字符串的子串
Jul 07 Javascript
angularjs创建弹出框实现拖动效果
Aug 25 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
js 定义对象数组(结合)多维数组方法
Jul 27 Javascript
AngularJS 输入验证详解及实例代码
Jul 28 Javascript
jQuery实现可展开折叠的导航效果示例
Sep 12 Javascript
JavaScript实现替换字符串中最后一个字符的方法
Mar 07 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
简化vuex的状态管理方案的方法
Jun 02 Javascript
vue+vant实现购物车全选和反选功能
Nov 17 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
joomla内置的表单验证功能使用方法
2010/06/11 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
PHP模板引擎smarty详细介绍
2015/05/26 PHP
PHP实现简单实用的验证码类
2015/07/29 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
PHP精确到毫秒秒杀倒计时实例详解
2019/03/14 PHP
Javascript setInterval的两种调用方法(实例讲解)
2013/11/29 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
利用python分析access日志的方法
2016/10/26 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
JavaScript实现树的遍历算法示例【广度优先与深度优先】
2017/10/26 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
jQuery中的$是什么意思及 $. 和 $().的区别
2018/04/20 jQuery
Vue创建头部组件示例代码详解
2018/10/23 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
基于并发服务器几种实现方法(总结)
2017/12/29 Python
tensorflow: variable的值与variable.read_value()的值区别详解
2018/07/30 Python
Selenium(Python web测试工具)基本用法详解
2018/08/10 Python
pytorch 获取tensor维度信息示例
2020/01/03 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
python urllib和urllib3知识点总结
2021/02/08 Python
厂长助理岗位职责
2013/12/27 职场文书
物理力学求职信
2014/02/18 职场文书
大学奖学金获奖感言
2014/08/15 职场文书
2014年维稳工作总结
2014/11/18 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
运动会3000米加油稿
2015/07/21 职场文书
初三化学教学反思
2016/02/22 职场文书
Python Pandas pandas.read_sql_query函数实例用法分析
2021/06/21 Python