效能更好的banner animation

之前有一篇介紹利用background-position製作動態的banner，不久後就接到效能不好的問題，所以我就重新用另一種方式製作，發現效能有明顯的提升，也很有成就感，本篇就介紹不同的動態banner作法。

本篇重點

利用css transform的方式，去改善動態banner的效能。(由於本篇主要是CSS3，所以會用sass作範例。)

Demo

原理

這是利用transform配合animation來進行位移。

+keyframes("banner-slider")
//建立一個keyframe
    from
        +transform(translate3d(0, 0, 0))
        //起始點
    to
        +transform(translate3d(image-width("banner-01.png"), 0, 0))
        //位移x，值為圖片的寬度

而如果直接套用，則會有另一個問題，就是圖片是位移了，但是不夠大。如下圖，紅框假設是使用者所見到的位置，淺色的部分是目前的圖片，黑色是期望有出現，但並沒有的顯示的圖片；因為這個問題，所以需要另外再補上一張圖片。

在這邊我是利用偽元素:pseudo-element來複製出所需要的圖片，目的就是要在目前的左方先補上一張相同的圖片。

製作

由於製作方式不同，所以html的結構也有所改變，目前的html如下。

<div class="banner">
<div class="banner-wrap">
    <span></span>
</div>
</div>

class=”banner” 主要是用來定位，以及裁切多餘的部分
class=”banner-wrap” 主要用來做動畫
span 圖片的位置

Sass

首先製作keyframe的部分

//由於compass 目前沒有animation，所以可以自己做animation的功能
=keyframes($name) //keyframes @mixin
    @-webkit-keyframes #{$name}
        @content
    @-moz-keyframes #{$name}
        @content
    @-ms-keyframes #{$name}
        @content
    @keyframes #{$name}
        @content

=animation($content) //animation @mixin
    -webkit-animation: $content
    -moz-animation: $content
    -o-animation: $content
    animation: $content

+keyframes("banner-slider")
//建立一個keyframe
    from
        +transform(translate3d(0, 0, 0))
        //起始點
    to
        +transform(translate3d(image-width("banner-01.png"), 0, 0))
        //位移x，值為圖片的寬度

//這部分我原本是用translate3d去做
//後來改成2D效果及效能也是差不多的

class的樣式如下

.banner
    position: relative
    min-height: $headerHeight
    width: 100%
    overflow: hidden //超出範圍的部分不顯示

    .banner-wrap
        +animation(banner-slider 180s infinite linear)
        //載入剛剛的動畫keyframe

    span,span:after //span以及其偽元素的樣式
        display: block
        min-height: $headerHeight
        width: 100%
        background: image-url("banner-01.png") top left repeat-x
        //top left的功能是要讓圖片從左邊開始

    span:after //補上偽元素所需要的屬性
        background-position: top right
        //偽元素從右邊開始，使其可以左右相接
        content: ""
        +transform(translate(-100%, 0))
        //將偽元素移到目前位置左方

效能

原本的background-position作法我在測試時都是用不太差的桌上型主機做測試，所以完全沒注意到效能的問題，但經過反映以後，利用chrome去測試，效能真的不好。

background-position的效能

background-position

transform的效能(幾乎沒有感覺啊!!)

transform

本篇是用sass做介紹，如果想了解所產生的css，可以參考http://codepen.io/Wcc723/pen/wFrCn。