iSmartCover 如同其名一樣, 讓 element 能以著名的 iPad accessory - SmartCover 捲動方式來做切換. 如同 iCube 一樣, 該 module 也是 bssed on CSS3 的 matrix3d. 除了具備 autoplay 的特性外, 亦可使用『點擊』,『拖曳』甚至是滑鼠『滾輪』來做切換. 更可以搭配水平或是垂直兩種模式來做不同的變化.

其實開發本 module 的另一個原因就是.............我太喜歡 iPad + 風呂蓋, 但是卻又買不起, 就只好開發這個 module 來過過乾癮 XD

歡迎點擊下方連結, 前往觀看喔^^
iSmartCover
iSmartCover(垂直模式)

需求: webkit 核心的瀏覽器, firefox

使用方法:
可以對頁面元素進行 "點擊", "拖曳", "滑鼠滾輪" 進行翻轉的動作, 亦可藉由設定 element 為 trigger 來驅動

JavaScript:

new iSmartCover('Mei',
    {
        wrapper:'smartCover',
        irp:0,
        coolTime:'5s',
        division:10,
        dragAble:true,
        isHori:true,
        isAuto:true
    }
);

參數解釋:
wrapper: 設定 wrapper, 可以是 id 或 DOM element, 即縮圖的 element
irp: 設定一開始欲呈現的 element order
coolTime: autoplay 有設定時, 每次切換的停留時間, 可以為 1s 或者 1000ms, default 為 1s
division: 設定 cube 量, default 為 10, 最小容許值為 3, 容許最大值為 20
dragAble: 設定是否可以進行拖曳切換, default 為 true, 若設定 false, 則 autoplay 亦會被關閉
isAuto: 設定是否自動播放, default 為 true
isHori: 設定水平或者垂直模式, default 為 true

搭配 metod: goTrans(), 亦可進行旋轉的動作

※ 也可自行於 demo 網址增加 GET parameter 來觀看其他呈現, 目前開放 isHori, division

Highlight:

1. create CSS by js
2. transition animation
3. translate3d
4. user-select:none (CSS3)

※ 使用 CSS 3D & Animation 注意事項

1. 別人的小孩死不完, 所以請直接施展必殺技 - transform:translate3d(0,0,0); 開啟硬體加速

2. perspective 屬性直接放在 wrap 就好, 千萬不要每個 element 都加, 不然會七彩霓虹燈轉不出個所以然的

3. 欲使用 3d 屬性的 element, 請記得賦予它 transform-style:preserve-3d
   儘量使用 classname 的增減來附加 animation, 使用 inline style 變化雖然方便 debug, 但會很不好控管

4. Safari 中 element 具有 transform 屬性者, 別想藉由 z-index 的變化就能壓過它

5. Chrome 中非當前做用視窗, 則 transition 的動作會被 freeze 住, 但無法 freeze transition-delay, 所以內部時間軸仍會繼續流動

6. 在滿足特定條件下, element CSS 屬性 visibility:hidden 有機會無法 hidden 其 children 經由 CSS 3d 跑出 element 範圍的部分, 比方說 children 被賦予了 transform-origin:0% 0%; transform:rotateY(120deg); (不過我已經忘了如何重建特定條件現場)

7. 若使用 2D matrix 屬性來設置, 則 0deg ~ 360deg 這樣的設定是不會旋轉的, 因為兩者皆是 matrix(1,0,0,1,0,0), 所以transition 會認為屬性相同, 不需要做變化, 因此要自己寫額外處理

8. 若想暫時關閉 transition (transition-property:none;)來做額外的屬性附加, 請給予它些許的時間差再還原其能力, 馬上掛回去有可能其 child element 尚未完成屬性附加, 然後出現無法預期的變化
   ex:

   this.wrapper.addClassName('noneani');
   this.wrapper.select('>div>div').each(
   function(n){
   n.addClassName('prepare');
   }
   );
   this.wrapper.removeClassName('noneani');