这是一款非常时尚的jQuery和CSS3侧边栏布局和切换页面动画特效。该侧边栏布局采用响应式设计,在点击了某个菜单项之后,侧边栏的右边部会出现一条全屏高度的进度条。进度条动画之后,相应的页面从左向右平滑的滑出。
制作方法
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 --> <!-- lateral loading bar --> <div id="cd-loading-bar" data-scale="1" class="index"></div>
CSS样式
侧边栏.cd-side-navigation
使用固定定位方式,它的高度设置为100%,同时设置overflow:hidden;
。并且它的子元素<ul>
设置了一个overflow-y: auto
属性,这样,如果侧边栏的内容比页面的高度要高,可以在内部滚动侧边栏。
为了创建在鼠标滑过菜单项时出现在右侧的线条,该特效中使用a::after
伪元素来制作它。它们采用绝对定位,4像素宽,和top:0;
,right:-4px;
。
这里要注意的是每一个列表项元素的宽度使用calc(100%- 4px)
来计算,这样可以使a::after
伪元素放置在.cd-side-navigation
的内部。
.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; }
但用户选择了一个新的菜单项之后,特效中会创建一个新的.cd-section
元素,并将它插入到DOM中。
默认情况下,.cd-section
元素被使用translateX(-100%)
移动到左侧屏幕之外。在用户点击菜单项之后,它被赋予.visible
class,使它移动会屏幕之中。
.cd-section{ position: absolute; z-index: 1; top: 0; left: 0; height: 100%; width: 100%; transform: translateX(-100%); transition: transform 0s 0.5s; } .cd-section.visible { /* this is the visible/selected section */ position: relative; z-index: 2; transform: translateX(0); transition: transform 0.5s 0s; }
JAVASCRIPT
该特效中所有的文件的HTML结构都基本相同,只是.cd-section
中的内容有所不同。
当用户点击一个菜单项的时候,triggerAnimation()
函数会被触发。这个函数会触发进度条动画函数loadingBarAnimation()
,并通过loadNewContent()
函数来加载新的内容。
对于加载进度条,特效中使用Velocity.js来制作动画效果。在进度条动画开始之前,进度条#cd-loading-bar
被放置在菜单项的右侧,高度和菜单项相同。然后通过scaleY
来制作进度条的动画效果。
function loadingBarAnimation() { //loadingBar is the #cd-loading-bar element //scaleY is the loadingBar actual scale value //this is the scaleY value to cover the entire window height (100% loaded) var scaleMax = loadingBar.data('scale'); if( scaleY + 1 < scaleMax) { newScaleValue = scaleY + 1; } // ... loadingBar.velocity({ scaleY: newScaleValue }, 100, loadingBarAnimation); }
当一个新的页面被选择了之后,.cd-section
元素会被创建并插入到DOM中。然后使用load()
函数来加载新的内容。这里在菜单项中使用一个data-menu
属性来决定要加载哪个文件。在页面被加载之后,进度条动画结束,旧的页面内容被新的页面内容替换,新的页面内容使用pushState()
方法来放入到window.history中。
function loadNewContent(newSection) { //create a new section element and insert it into the DOM (newSection is the data-menu of the selected navigation item) 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(){ //add the .visible class to the new section element -> it will cover the old one 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); } // ... }); }); }
为了让用户在点击浏览器的回退按钮时得到相同的动画效果,特效中监听popstate
事件,并通过triggerAnimation()
方法来触发它。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!