首页 > 代码库 > 酷毙了!三种风格的全屏幻灯片效果【附源码下载】

酷毙了!三种风格的全屏幻灯片效果【附源码下载】

  今天,我们想向您展示如何创建平铺背景图像的幻灯片效果。其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看。

  这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片。这里需要组合使用 CSS3 的3D转换、过渡和动画功能。除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验。

  温馨提示:为保证最佳的效果,请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。

 

 

源码下载      在线演示

 

  对于幻灯片,我们需要一个特殊的 HTML 结构来实现四个不同的页面区域,每个区域都使用相同的图像,但用了不同的定位,让四个区域拼起来刚好是一张完整的背景图片。我们需要确保内容充满整个页面,因为这是一个全屏幻灯片效果。

  我们先定义一个简单的初始结构,能够指定在每个面板(或幻灯片)中哪张图像会显示,然后创建我们的重复结构的片段。所以,最初我们希望是这样的:

<div id="boxgallery" class="boxgallery" data-effect="effect-1">    <div class="panel"><img src="http://www.mamicode.com/img/1.jpg" alt="Image 1"/></div>    <div class="panel"><img src="http://www.mamicode.com/img/2.jpg" alt="Image 2"/></div>    <div class="panel"><img src="http://www.mamicode.com/img/3.jpg" alt="Image 3"/></div>    <div class="panel"><img src="http://www.mamicode.com/img/4.jpg" alt="Image 4"/></div></div>

  为了能够通过把图片分解成片段来实现动画效果,我们将需要为每个面板定义下面这样的结构:

div id="boxgallery" class="boxgallery" data-effect="effect-1">    <div class="panel current">        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/1.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/1.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/1.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/1.jpg" /></div>        </div>    </div>    <div class="panel">        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/2.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/2.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/2.jpg" /></div>        </div>        <div class="bg-tile">            <div class="bg-img"><img src="http://www.mamicode.com/img/2.jpg" /></div>        </div>    </div>    <div class="panel">        <!-- ... -->    </div>    <div class="panel">        <!-- ... -->    </div>    <nav>        <span class="prev"><i></i></span>        <span class="next"><i></i></span>    </nav></div>

  当然,你可能看上面的结构可能会问为什么不使用背景图片而用图像元素?其实在尝试使用各种方式对比之后,我们在试验后得出结论,使用背景图像与设置背景大小的方式可能会导致过渡效果有问题。例如使用 background-size: cover 会导致转换动画出现颤抖现象。

  我们还需要添加一个导航,这样我们就可以通过面板进行浏览。上面我们还用到了数据属性,里面设置了动画的效果。下面,让我们添加一些样式到这个效果中。需要注意的是,这里演示的 CSS 将不包含任何浏览器的前缀,但在源码文件是有的。

  首先,我们在全屏模式,所以为了让我们的页面布满窗口,需要设置如下:

html, body, .container {    height: 100%;}

  主容器和子元素都将绝对定位,面板将占据所有的宽度和高度:

.js .boxgallery,.js .boxgallery div {    position: absolute;} .js .boxgallery,.js .panel {    top: 0;    left: 0;    width: 100%;    height: 100%;}

  由于我们的效果将可能有元素超出自己的区域,我们还需要确保不会溢出:

.js .boxgallery,.bg-tile,.bg-img {    overflow: hidden;}

  这个例子有三种效果,下面是用于第一效果的 CSS 动画效果代码:

.boxgallery[data-effect="effect-1"] .panel.active .bg-tile,.boxgallery[data-effect="effect-2"] .panel.active .bg-tile {    animation: scaleDown 1.1s ease-in-out;} @keyframes scaleDown {    from { transform: translate3d(0,0,380px); }    to { transform: translate3d(0,0,0); }}

 

源码下载      在线演示

 

您可能感兴趣的相关文章
  • 太赞了!超炫的页面切换动画效果【附源码下载】
  • 创意无限!一组网页边栏过渡动画【附源码下载】
  • 好东西!动感的页面加载动画效果【附源码下载】
  • 使用 CSS3 实现3D图片滑块效果【附源码下载】
  • 时尚设计!三种奇特网格加载效果【附源码下载】

 

本文链接:如何创建平铺背景的四格幻灯片效果 via Codrops

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

本文出处【http://www.cnblogs.com/lhb25/】