js html页面切换效果,jQuery实现切换页面过渡动画效果
本文详细阐述了利用 jQuery 技术实现网页切换效果的技术细节，并可供参考。现将该技术经验提供给各位如需进一步了解，请作为参考资料使用。
这款插件展现出极高的视觉吸引力，并巧妙地结合了jQuery和CSS3技术与AJAX技术实现页面切换的动态效果。在页面加载过程中运用CSS3技术创造出令人惊艳的过渡动画效果，在线展示给用户带来全新的视觉体验感受。该插件采用推移状态（pushState）方法来处理浏览器的历史记录需求，在实际应用中表现出色。如需进一步了解，请参考文档中的相关内容。
直接为大家介绍制作过程，希望大家可以喜欢。
HTML结构
该页面切换特效的HTML结构采用一个元素来作为页面包裹元素，并被用来制作页面切换时的效果遮罩层。同时，在AJAX加载过程中，则会使用p.cd-loading-bar来表示其加载进度条。
Page Transition
CSS样式
该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候，这些元素被移动回视口当中(通过在
元素上添加.page-is-changing class)。
下面的图片演示了这个过程：
页面切换特效
body::after, body::before {
These represent two half blocks that are responsible for covering the content when an animation is triggered.
height: 50vh;
width: 100%;
position: fixed;
left: 0;
}
body::before {
top: 0;
transform: translateY(-100%);
}
body::after {
bottom: 0;
transform: translateY(100%);
}
body.page-is-changing::after, body.page-is-changing::before {
transform: translateY(0);
}
在页面切换过程中，在线展示内容时会呈现出淡入淡出的效果。这种效果是通过调整p.cd-cover-layer元素的透明度来实现的，在这个过程中该层会覆盖.main-content元素并保持与之相同的背景色；从而在后续操作中完成这一视觉效果展示
被添加.page-is-changing class的时候，将透明度从0修改为1。
该进度条基于.cd-loading-bar::before伪元素进行制作，在其默认样式下进行缩放（scaleX(0)）并设置变换原点位于左侧中心位置；而在页面切换开始时则会调用scaleX(1)将其放大至原始尺寸。
.cd-loading-bar {
此加载条显示于切换当前页面至下一个页面时
position: fixed;
height: 2px;
width: 90%;
}
.cd-loading-bar::before {
/* this is the progress bar inside the loading bar */
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: left center;
}
.page-is-changing .cd-loading-bar::before {
transform: scaleX(1);
}
通过CSS Transitions技术，在特效中实现了过渡效果的平滑过渡。每个动画元素均配置了独特的transition-delay属性值，从而确保各元素的动画执行顺序各有不同。
JAVASCRIPT
该页面切换特效中，在页面切换特效的链接中使用了data-type="page-transition"属性以触发页面切换事件。当插件检测到用户点击事件时，changePage()方法将被执行。
$('main').on('click', '[data-type="page-transition"]', function(event){
event.preventDefault();
//detect which page has been selected
var newPage = $(this).attr('href');
//if the page is not animating - trigger animation
if( !isAnimating ) changePage(newPage, true);
});
这个方法会触发页面切换动画，并通过loadNewContent()方法加载新内容。
function changePage(url, bool) {
isAnimating = true;
// trigger page animation
$('body').addClass('page-is-changing');
//...
loadNewContent(url, bool);
//...
}
在新的内容加载时（...），旧的内容会被取代。.page-is-changing class会被从body中移除，并由新加载的内容所取代。
function loadNewContent(url, bool) {
var newSectionName = 'cd-'+url.replace('.html', ''),
section = $('
section.load(url+' .cd-main-content > *', function(event){
// load new content and replace content with the new one
$('main').html(section);
//...
$('body').removeClass('page-is-changing');
//...
if(url != window.location){
//add the new page to the window.history
window.history.pushState({path: url},'',url);
}
});
}
当用户按下浏览器的后退按钮时，在该事件被触发后执行changePage()函数。
$(window).on('popstate', function() {
var newPageArray = location.pathname.split('/'),
//this is the url of the page to be loaded
newPage = newPageArray[newPageArray.length - 1];
if( !isAnimating ) changePage(newPage);
});
本篇文章的主要内容已做了全面介绍。旨在帮助各位更好地掌握相关知识。如需获取更多学习资料，请访问PHP中文网！
本篇文章的主要内容已做了全面介绍。旨在帮助各位更好地掌握相关知识。如需获取更多学习资料，请访问PHP中文网！
相关推荐：