使用 CSS3 製作令人印象深刻的產品展示
產品頁面是您網站上展示產品的任何頁面。它必須描述其功能，提供一些屏幕截圖並具有描述性。當然，這是您建立訪問者對您的產品的興趣的地方，但要吸引他們的注意力變得越來越難。幸運的是，一個新的緊湊的 JavaScript 庫可以幫助你引起轟動。
impress.js 是一個小型的獨立庫，可以輕鬆設計具有引人注目的效果的高級 CSS3 演示文稿。但是，如果我們將 impress.js 用於演示文稿以外的東西呢？這就是我們今天要做的——我們將用一些 CSS3 魔法來為一個普通的舊產品頁面增添趣味！
HTML
我們從一個簡單的 HTML5 文檔開始，它將成為今天示例的主幹。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>
<!-- Google Webfonts and our stylesheet -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="impress" class="impress-not-supported">
<!-- The Slides Will Go Here -->
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></a>
<!-- JavaScript includes -->
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="assets/js/impress.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> 這裡沒有什麼不尋常的。除了頭部包含的 Google Webfonts 之外，我們還有我們的主樣式表（我們將在下一節中介紹）和一些 JavaScript 源文件，位於結束 body 標記之前。
#impress div 將保存幻燈片。需要 id 才能被 impress.js 識別 （您可以通過將不同的 id 傳遞給 script.js 中的 impress 函數調用來覆蓋它）。在此之後，我們有啟動幻燈片轉換的箭頭。
在頁面的最後，我們有我們的 JavaScript 源文件。 impress.js 是獨立的，不需要 jQuery 來工作，但我們將包含它，以便我們可以監聽 script.js 中箭頭的點擊 文件。
我們展示的每張幻燈片都包含三個元素 - 標題 , 一個段落 文本和智能手機圖像 .這些都針對每張幻燈片進行了唯一定位。此示例的宣傳圖片和文字取自 Google 的 Galaxy Nexus 網站。
幻燈片的元素被分組到單獨的“step " #impress 容器內的 div。這樣我們就為 impress.js 做好了準備 ！
使用 impress.js
使用這個小型庫，我們可以在展示的幻燈片之間創建平滑的 CSS3 過渡。為此，我們必須指導 impress.js 如何定位幻燈片。這很容易做到——我們將在步驟 div 上使用數據屬性。這些屬性由庫翻譯成真正的 CSS3 轉換，具體取決於當前瀏覽器，並影響幻燈片。
Impress.js 支持許多屬性：
- 數據-x , 數據-y , 數據-z 將在 3D 空間中移動屏幕上的幻燈片；
- 數據輪換 , data-rotate-x , data-rotate-y 圍繞指定軸旋轉元素（以度為單位）；
- 數據規模 - 放大或縮小幻燈片。
您可以看到以下幻燈片的標記：
<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
<h2>Introducing Galaxy Nexus</h2>
<p>Android 4.0<br /> Super Amoled 720p Screen<br />
<img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>
<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
<h2>Simplicity in Android 4.0</h2>
<p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
<img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>
<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
<h2>Connect & Share</h2>
<p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
<img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>
<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
<h2>Instant Upload</h2>
<p>Your photos upload themselves with Instant Upload, which makes ..</p>
<img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>
<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
<h2>Jam on with Google Music</h2>
<p>Google Music makes discovery, purchase, and listening effortless and..</p>
<img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div> 當幻燈片開始時，impress.js 將補償這些轉換，並將反向規則應用到#impress div，並具有平滑的 CSS 轉換。結果是您在演示中看到的引人注目的演示文稿。當然，這是以您必須手動調整每張幻燈片的數據屬性以獲得最佳結果為代價的。
CSS
為了使演示有效，我們必須應用一些 CSS 規則。第一步是設置演示容器的樣式並聲明幻燈片元素的默認樣式。
assets/css/style.css
/*----------------------------
Styling the presentation
-----------------------------*/
#impress:not(.impress-not-supported) .step{
opacity:0.4;
}
#impress .step{
width:700px;
height: 600px;
position:relative;
margin:0 auto;
-moz-transition:1s opacity;
-webkit-transition:1s opacity;
transition:1s opacity;
}
#impress .step.active{
opacity:1;
}
#impress h2{
font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
color:#444648;
position:absolute;
z-index:10;
}
#impress p{
font: normal 18px/1.3 'Open Sans', sans-serif;
color:#27333f;
position:absolute;
z-index:10;
}
#impress img{
position:absolute;
z-index:1;
} 正如您在上面的規則和本教程開頭的 HTML 片段中看到的那樣，#impress 容器被分配了一個 .impress-not-supported 班級。僅噹噹前瀏覽器支持庫成功運行所需的功能時，才會刪除該類。
現在我們需要為各個幻燈片設置樣式。我將只包括第一張幻燈片的類，您可以在 assets/css/styles.css 中找到其餘部分 .
/*----------------------------
Slide 1 - Intro
-----------------------------*/
#impress #intro{
width: 500px;
}
#intro h2{
text-align: center;
width: 100%;
}
#intro p{
font-size: 22px;
left: 290px;
line-height: 1.6;
top: 220px;
white-space: nowrap;
}
#intro img{
top: 120px;
} 剩下的就是一個快速的 JS 片段來啟動 impress.js，並監聽箭頭上的點擊。
jQuery
要初始化 impress 庫，我們需要調用同名的方法。這還將返回一個新對象，其中包含顯示上一張/下一張幻燈片的方法。
script.js
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
}); 到此，我們令人印象深刻的產品展示就完成了！
完成！
您可以將此示例用於產品和登錄頁面、功能展示，並且通過一些隨機化，您甚至可以將其變成圖片庫。
