jQueryで"multiple background image"の特定の要素だけ操作できるか（できた！）

CSS3の"multiple background image"技法を適用した要素のうち、手前のグラデーションを固定しいちばんうしろの繰り返し画像だけをjQueryでスクロールできるかどうかのテスト。 webkit系とFireFoxで異なるtransform指定をしています。 CSS3に対応していないieやoperaは非対応です。 参考サイト：http://www.webopixel.net/javascript/143.html （jQueryで背景画像をアニメーションで無限ループさせる）

by urunao

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryで複数背景画像をループ</title>
</head>
<body>
<div id="main">
    <h1>jQueryでループ</h1>
</div>
</body>
</html>

CSS

#main{
    background: -webkit-gradient(linear, left center, right center, from(white),
        color-stop(0.5, rgba(255,255,255,0)),
        to(white)),
        url("https://lh3.googleusercontent.com/-SqRCl22cp3I/AAAAAAAAAAI/AAAAAAAAAbs/finrjYR_V3E/photo.jpg?sz=70") repeat-x center center;
    background: -moz-linear-gradient(left, white,
        rgba(255,255,255,0),
        white),
        url("http://lh5.googleusercontent.com/-SqRCl22cp3I/AAAAAAAAAAI/AAAAAAAAAVo/KTpyQ-v_b0U/photo.jpg?sz=70") repeat-x center center;
    transform: skewY(-9deg);
    -webkit-transform: perspective(250px) rotateY(-25deg);
    -moz-transform: skewY(-9deg);

    }
#main {
    height: 70px;
    width: 449px;
    }

JavaScript

$(document).ready(function () {
    var scrollSpeed = 1;
    var posX = 0;
    setInterval(function(){
        posX += scrollSpeed;
        $('#main').css("background-position","center center,"+posX+"px center");
    }, 10);
});