这是一款效果非常炫酷的jQuery和CSS3全屏开关门切换页面特效。该页面切换特效可以使用鼠标上下滚动来切换页面。向下滚动时页面像开门一样从中间展开展示下一页,向上滚动时页面像关门一样从两侧收缩展示上一页。
制作方法
HTML结构
该页面切换特效的HTML结构非常简单。使用一个div.scene
作为整个页面的包裹容器。每一个div.page
是一个页面。div.nav-panel
是右侧的圆点单行按钮和箭头导航按钮。
<div class="scene"> <div class="page page-1 active"> <div class="half left"></div> <div class="half right withText"> <h2 class="heading">Page 1</h2> </div> </div> ...... </div> <div class="nav-panel"> <div class="scroll-btn up"></div> <div class="scroll-btn down"></div> <nav> <ul> <li data-target="1" class="nav-btn nav-page1 active"></li> <li data-target="2" class="nav-btn nav-page2"></li> <li data-target="3" class="nav-btn nav-page3"></li> <li data-target="4" class="nav-btn nav-page4"></li> </ul> </nav> </div>
CSS样式
所有的页面都被设置为绝对定位,宽度和高度都设置为100%。同时为transform
和opacity
属性设置了平滑过渡效果,并使用will-change
属性来通知浏览器要优化这两个属性。
.page { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: -webkit-transform .7s, opacity .7s; transition: transform .7s, opacity .7s; will-change: transform, opacity; }
在每一页中,都使用.left
和.right
将页面分为左右两个部分,并使用nth-child
选择器来为它们分别设置背景图片:
.page:nth-child(1) .left { background-image: url("http://i.imgur.com/dqQ7i1P.jpg"); } .page:nth-child(1) .right { background-image: url("http://i.imgur.com/odir8q1.jpg"); } ......
开始的时候,除了第一个页面,其它页面的左右部分都分别使用translateX
来将它们移动屏幕之外。
.page:nth-child(2) .left { -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .page:nth-child(2) .right { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } ......
当滚动到相应的页面的时候,在将它们移动会屏幕中间。这些操作是在jQuery代码中完成的。
具体的js代码请参考下载文件。
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!