一款JQuery网页背景切换插件

一款JQuery网页背景切换插件
 点击预览  点击下载

Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics.

今天我们想与你分享一个创意页面转换。我们已经把一些动画,可以应用于“创造有趣的导航效果时,揭示了新的一页”。而有些影响是非常简单的,即一个简单的滑动运动,其他人利用角度和三维变换来创建一些深度和动力学。

Please note that this is just for showcasing some interesting effects and for inspiration. It is not a slider or anything like that. We’ll just apply some classes to make the page transition visible, not for navigating.

请注意,这只是展示了一些有趣的影响和启示。它不是一个滑块或什么的。我们只会应用一些类使页面过渡不可见,导航。

结构代码:

  1. <div id="pt-main" class="pt-perspective"> 
  2.     <div class="pt-page pt-page-1"> 
  3.         <h1><span>A collection of</span><strong>Page</strong> Transitions</h1> 
  4.     </div> 
  5.     <div class="pt-page pt-page-2"><!-- ... --></div> 
  6.     <!-- ... --> 
  7. </div> 

The perspective container is relative and we add a perspective of 1200px to it. The following styles are needed for all animations to work:

样式表:

  1. .pt-perspective { 
  2.     positionrelative
  3.     width100%
  4.     height100%
  5.     perspective: 1200px
  6.     transform-style: preserve-3d; 
  7.   
  8. .pt-page { 
  9.     width100%
  10.     height100%
  11.     positionabsolute
  12.     top: 0
  13.     left: 0
  14.     visibilityhidden
  15.     overflowhidden
  16.     backface-visibilityhidden
  17.     transform: translate3d(000); 
  18.   
  19. .pt-page-current, 
  20. .no-js .pt-page { 
  21.     visibilityvisible
  22.   
  23. .no-js body { 
  24.     overflowauto
  25.   
  26. .pt-page-ontop { 
  27.     z-index999

.pt-page-ontop 用于一些我们需要一个页面留在顶端的另一个页面转换

转载请注明:代码家园 » 一款JQuery网页背景切换插件

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)