基于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使用手册之三 CSS操作
Mar 24 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
浅谈es6 javascript的map数据结构
Dec 14 Javascript
微信小程序使用form表单获取输入框数据的实例代码
May 17 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
jQuery pjax 应用简单示例
Sep 20 jQuery
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
前端JavaScript大管家 package.json
Nov 02 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实现根据字符串生成对应数组的方法
2014/09/22 PHP
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
如何在PHP中使用数组
2020/06/09 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
js读取json的两种常用方法示例介绍
2014/10/19 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
JavaScript深度复制(deep clone)的实现方法
2016/02/19 Javascript
前端性能优化及技巧
2016/05/06 Javascript
jQuery实现的网格线绘制方法
2016/06/20 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
简单理解js的冒泡排序
2016/12/19 Javascript
vue-resource 拦截器使用详解
2017/02/21 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
[01:11:08]Winstrike vs NB 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
[56:42]完美世界DOTA2联赛循环赛 Matador vs Forest 第二场 11.06
2020/11/06 DOTA
python魔法方法-自定义序列详解
2016/07/21 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python配置文件处理的方法教程
2019/08/29 Python
没编程基础可以学python吗
2020/06/17 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
python中pdb模块实例用法
2021/01/15 Python
CSS3 :nth-child()伪类选择器实现奇偶行显示不同样式
2013/11/05 HTML / CSS
一道输出判断型Java面试题
2014/10/01 面试题
致跳高运动员加油稿
2014/02/12 职场文书
化工实习心得体会
2014/09/09 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
安全生产月宣传标语
2014/10/06 职场文书
工商局调档介绍信
2015/10/22 职场文书