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

標籤：des   style   class   blog   http   java   

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

　　這個投影片效果是由四個地區的獨立移動構成，通過畫面分割，同時顯示出新的圖片。這裡需要組合使用 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/】