基于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 25 Javascript
jquery 获取json数据实现代码
Apr 27 Javascript
LazyForm jQuery plugin 定制您的CheckBox Radio和Select
Oct 24 Javascript
Javascript实现页面跳转的几种方式分享
Oct 26 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
详解JS去重及字符串奇数位小写转大写
Dec 29 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
使用Nuxt.js改造已有项目的方法
Aug 07 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 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
php中substr()函数参数说明及用法实例
2014/11/15 PHP
php使用ffmpeg获取视频信息并截图的实现方法
2016/05/03 PHP
laravel 出现command not found问题的解决方案
2019/10/23 PHP
Yii框架布局文件的动态切换操作示例
2019/11/11 PHP
扩展jQuery 键盘事件的几个基本方法
2009/10/30 Javascript
用Javascript同时提交多个Web表单的方法
2009/12/26 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
2013/06/28 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
动态加载js的方法汇总
2015/02/13 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
2020/08/21 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
JavaScript实战之带收放动画效果的导航菜单
2016/08/16 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
JS实现字体背景跑马灯
2020/01/06 Javascript
vuecli3.x中轻松4步带你使用tinymce的步骤
2020/06/25 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
numpy.ndarray 实现对特定行或列取值
2019/12/05 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
pycharm 复制代码出现空格的解决方式
2021/01/15 Python
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
校园招聘策划书
2014/01/09 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
社会公德演讲稿
2014/05/20 职场文书
授权委托书(完整版)
2014/09/10 职场文书
派出所副所长四风问题个人整改措施思想汇报
2014/10/13 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
Spring实现内置监听器
2021/07/09 Java/Android