使用 CSS3 實現 3D 圖片滑塊效果【附源碼下載】
使用 CSS3 的3D變換特性，我們可以通過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊插件，利用了 3D transforms（變換）屬性來實現多種不同的效果。
溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。
實現的基本思路是創建三維圖像切片，作為三維物體的另一側，旋轉并顯示下一個圖像。若瀏覽器不支持3D變換，一個簡單的滑塊將作為后備方案。要調用這個插件，首先把圖片放在無序列表中，然后添加 CSS 類——"sb-slider" 即可，下面是 HTML 代碼示例：
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Creative Lifesaver</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
另外也還可以使用帶有 class 為 “sb-description” 的DIV來為圖片添加描述。如本例所示，您還可以在圖像周圍添加錨點。然后調用插件就可以了：
$('#sb-slider').slicebox();
Slicebox 配備了一組選項，你可以調整以實現不同類型的效果，各個選項和作用如下：
$.Slicebox.defaults = {
// 方向(v)ertical, (h)orizontal or (r)andom
orientation : 'v',
// 元素距離視圖的距離，以像素計
perspective : 1200,
// 切片，長方體的數量
cuboidsCount : 5,
// 是否隨機
cuboidsRandom : false,
// 長方體最大數量
maxCuboidsCount : 5,
disperseFactor : 0,
// 隱藏滑塊的顏色
colorHiddenSides : '#222',
sequentialFactor : 150,
// 動畫速度
speed : 600,
// 過渡效果
easing : 'ease',
// 自動播放
autoplay : false,
// 旋轉間隔
interval: 3000,
// 淡入淡出速度
fallbackFadeSpeed : 300,
// 回調函數
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
您可能感興趣的相關文章
本文鏈接：jQuery & CSS3 實現 3D 圖片滑塊 via codrops
浙公網安備 33010602011771號