全屏網格摺疊動畫外掛程式

duang，duang，duang，博主又來分享外掛程式了，這次是乙個炫酷的網格摺疊動畫效果，其原理模擬紙板摺疊過程的動畫，頁面使用了大量css3屬性，具體效果請看演示頁面（建議使用新版谷歌、火狐瀏覽器**，對於ie9以下不支援css3屬性的瀏覽器不相容）。

分析這個外掛程式邏輯之前，先說一下實現動畫效果的css3屬性：transform-origin。這個屬性主要用於設定旋轉元素的基點位置，就是用於改變網格翻轉時基點，因為預設網格翻轉是以網格中心點為基點進行翻轉，這樣的動畫效果不符合我們預期。下面這張圖大概講解了一下transform-origin屬性配合rotate屬性實現網格翻轉動畫的原理。

在這張圖里，你會看到每個網格對應乙個數字，這是方便理解整體網格區域與視窗顯示區域的關係。整體網格容器是由33個網格組成，一共分為3排，每排11個。在我們的可視區域內，如果不算上螢幕兩邊的半個網格區域，一共有6個網格，所有還有5個網格（包括未顯示完整的網格）未顯示。可以根據序號得出左邊有3個網格（0、1、2），右邊有2個網格（9、10）隱藏了。

ps:這裡的序號對應每個網格排列的序號（從 0 開始計算）

下面是分解動畫的過程：

從這裡可以觀察出，每排的網格都會逐漸向中心摺疊，這裡的中心元素分別對應序號5（第6個網格）、16（第17個網格）、27（第28個網格）。當第一排和第三排網格都摺疊完畢時，第一排網格和第三排網格（5、27）朝向網格16摺疊，最後網格16的原點基於中心的進行摺疊。這就是所有網格動畫的乙個完整的執行過程。

下面展示一下原始碼：

//定義基礎變數，以及外掛程式api
var _ops = $.extend(, options);
var $this = $(this),
_shadetime = _ops.shadetime, //遮罩層遮擋網格時長
_flodtime = _ops.flodtime, //初始化頁面執行網格摺疊動畫的延遲時長
_showbtntime = _ops.showbtntime, //摺疊動畫開始至顯示按鈕的延遲時長
_loading_zzc = _ops.loading_zzc, //遮罩層的class
_loading_btns = _ops.loading_btns, //網格動畫控制按鈕的class
_btn_logo = _ops.btn_logo, //網格動畫控制按鈕子元素的class
_preloader = _ops.preloader, //網格容器的class
_square_box = _ops.square_box, //網格容器子元素的class
_square = _ops.square; //網格的class

以下是關於網格摺疊動畫的**：

var p = 'perspective(600px)'; //定義 3d 元素距檢視的距離
for(var i=0;i<5;i++));
}for(var j=11;j>5;j--));
}for(var k=12;k<16;k++));
}for(var m=22;m>16;m--));
}for(var s=23;s
<27;s++));
}for(var g=33;g>27;g--));}$(
'.'+_square).eq(5).css();
$('.'+_square).eq(27).css();
$('.'+_square).eq(16).css();

以下是關於網格展開動畫的**：

var p = 'perspective(600px)'; //定義 3d 元素距檢視的距離
for(var i=4;i>-1;i--));
}for(var j=6;j<12;j++));
}for(var k=15;k>11;k--));
}for(var m=17;m
<23;m++));
}for(var s=26;s>22;s--));
}for(var g=28;g<34;g++));}$(
'.'+_square).eq(5).css();
$('.'+_square).eq(27).css();
$('.'+_square).eq(16).css();

全屏網格摺疊動畫外掛程式

jQuery lightbox外掛程式相簿全屏效果

Activity全屏透明動畫等

jQuery全屏滾動外掛程式fullPage使用

全屏網格摺疊動畫外掛程式

jQuery lightbox外掛程式 相簿全屏效果

Activity全屏透明動畫等

jQuery全屏滾動外掛程式fullPage使用

相關推薦

jQuery lightbox外掛程式相簿全屏效果