js html页面切换效果,jQuery实现切换页面过渡动画效果

这篇文章主要介绍了关于jQuery实现切换页面过渡动画效果，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

这是一款效果非常酷的jQuery和CSS3通过AJAX调用切换页面过渡动画特效插件。该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下

直接为大家介绍制作过程，希望大家可以喜欢。

HTML结构

该页面切换特效的HTML结构使用一个元素来作为页面的包裹元素，p.cd-cover-layer用于制作页面切换时的遮罩层，p.cd-loading-bar是进行ajax加载时的loading进度条。

Page Transition

CSS样式

该页面切换特效中使用body::before和body::after伪元素在页面切换过程中创建两个遮罩层来遮住页面内容。它们的定位是固定定位，高度等于50vh，宽度为100%。默认情况下，使用CSS transform属性将它们隐藏起来(translateY(-100%)/translateY(100%))。当用户切换页面的时候，这些元素被移动回视口当中(通过在

元素上添加.page-is-changing class)。

下面的图片演示了这个过程：

页面切换特效

body::after, body::before {

/* these are the 2 half blocks which cover the content once the animation is triggered */

heig