基于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关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
防止jQuery ajax Load使用缓存的方法小结
Feb 22 Javascript
做web开发 先学JavaScript
Dec 12 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
AngularJS优雅的自定义指令
Jul 01 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
微信小程序wepy框架学习和使用心得详解
May 24 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
用JS实现选项卡
Mar 23 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
论坛头像随机变换代码
2006/10/09 PHP
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
在php中判断一个请求是ajax请求还是普通请求的方法
2011/06/28 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
Javascript遍历table中的元素示例代码
2014/07/08 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
2017/05/09 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
ES6基础之字符串和函数的拓展详解
2019/08/22 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python调用Delphi写的Dll代码示例
2017/12/05 Python
Django 生成登陆验证码代码分享
2017/12/12 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
使用PyCharm进行远程开发和调试的实现
2019/11/04 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Hunkemöller西班牙:欧洲最大的内衣连锁店
2018/08/15 全球购物
西班牙品牌鞋子、服装和配饰在线商店:Esdemarca
2021/02/17 全球购物
如何写好升职自荐信
2014/01/06 职场文书
医学生自我评价
2014/01/27 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年中学总务处工作总结
2015/07/22 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
Python3 如何开启自带http服务
2021/05/18 Python