酷斃了！三種風格的全屏幻燈片效果【附源碼下載】

　　今天，我們想向您展示如何創建平鋪背景圖像的幻燈片效果。其靈感來自於國外的一個工作室網站（圍觀），這個網站充滿了各種有趣和創意效果，一定記得去看看。

　　這個幻燈片效果是由四個區域的獨立移動構成，通過畫面分割，同時顯示出新的圖片。這里需要組合使用 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); }
}

 

源碼下載      在線演示

 

您可能感興趣的相關文章

• 太贊了！超炫的頁面切換動畫效果【附源碼下載】
• 創意無限！一組網頁邊欄過渡動畫【附源碼下載】
• 好東西！動感的頁面加載動畫效果【附源碼下載】
• 使用 CSS3 實現3D圖片滑塊效果【附源碼下載】
• 時尚設計！三種奇特網格加載效果【附源碼下載】

 

本文鏈接：如何創建平鋪背景的四格幻燈片效果 via Codrops

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

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