浙江 杭州

jQuery和CSS3全屏开关门切换页面特效

系统分类: 网页特效 - jquery插件 - jQuery图片展示/幻灯片 2017-03-23

人气528

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一款效果非常炫酷的jQueryCSS3全屏开关门切换页面特效。该页面切换特效可以使用鼠标上下滚动来切换页面。向下滚动时页面像开门一样从中间展开展示下一页,向上滚动时页面像关门一样从两侧收缩展示上一页。

制作方法

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%。同时为transformopacity属性设置了平滑过渡效果,并使用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代码请参考下载文件。

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:66.78KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1856.html 非特殊说明,本文版权归原作者所有,转载请注明出处
jQuery和CSS3全屏开关门切换页面特效

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

据说认真评论作品的以后都迅速成长为大神了(已有0 评论)