酷毙了！三种风格的全屏幻灯片效果_js

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

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

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

源码下载      在线演示

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

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

 <div id="boxgallery" class="boxgallery" data-effect="effect-1">     <div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>     <div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>     <div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>     <div class="panel"><img src="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="img/1.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="img/1.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="img/1.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="img/1.jpg" /></div>         </div>     </div>     <div class="panel">         <div class="bg-tile">             <div class="bg-img"><img src="img/2.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="img/2.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="img/2.jpg" /></div>         </div>         <div class="bg-tile">             <div class="bg-img"><img src="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); } }

源码下载      在线演示

欢迎大家阅读《酷毙了！三种风格的全屏幻灯片效果_js》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

喜欢 (0)赏

[搞代码]

分享 (0)