jQueryでスクロールに合わせて要素を移動させる方法

CSSアニメーションとjQueryを使って、スクロールに合わせて要素を移動させる方法です。
CSS3のプロパティtransitionを使っているので、対応はIE10↑になりますが、移動自体はするので（瞬間移動のような感じで）使い道はあるかなぁと。

DEMO

以下のデモをスクロールしてみてください。葉っぱの位置が移動します。

html

動かす要素に.object、更に子要素としてspanに.pos0を付与しています。
子要素にしているのは、動かす要素に対してjsでクラス名を削除する処理をするため、親要素のクラス名で識別する必要があるからです。
8～10行目は動きが分かりやすいように罫線を入れただけなので、削除してOKです。

<p id="interval">スクロール値：0</p>
<div id="wrap">
    <div class="object">
        <span class="pos0">
            <img src="http://gimmicklog.main.jp/demo/images/leaf.png" />
        </span>
    </div>
    <p class="border1">pos1</p>
    <p class="border2">pos2</p>
    <p class="border3">pos3</p>
</div>

css

.object span のプロパティ transition: all 2s ease;が、葉っぱが移動する時の動きの指定です。
.pos0～.pos3で、葉っぱが移動する位置を4段階で指定しています。

#interval {
    position:fixed;
    top:0;
    right:0;
}
#wrap {
    position:relative;
    height:2000px;
}
.object span {
    z-index:10;
    position:absolute;
    -webkit-transition: all 2s ease;/*アニメーションの変化*/
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}
.pos0 {
    top:0px;
    left:0px;
}
.pos1 {
    top:500px;
    left:200px;
}
.pos2 {
    top:1000px;
    left:400px;
}
.pos3 {
    top:1500px;
    left:200px;
}

jQuery

4行目でスクロールした値を取得し、5行目以降でその値によって要素の位置を指定したクラス名を削除、追加するようにしています。

$(function () {
    $(window).scroll(function () {
        $('#interval').text('スクロール値：' + $(this).scrollTop());
        var top = $(this).scrollTop();
        if (top > 1 && top < 199) {
            $(".object span").removeClass().addClass('pos0');
        }
        if (top > 200 && top < 599) {
            $(".object span").removeClass().addClass('pos1');
        }
        if (top > 600 && top < 999) {
            $(".object span").removeClass().addClass('pos2');
        }
        if (top > 1000 && top < 2000) {
            $(".object span").removeClass().addClass('pos3');
        }
    });
});

CSS（要素が揺れるアニメーションとボーダー）

以下のCSSはボーダーと葉っぱの揺れを指定したものです。これがなくても動きます。

.border1,
.border2,
.border3 {
    border-top:1px #ccc solid;
    position:absolute;
    width:100%;
}
.border1 {
    z-index:1;
    top:500px;  
}
.border2 {
    z-index:2;
    top:1000px;  
}
.border3 {
    z-index:3;
    top:1500px;  
}
/* スイングアニメーション */
.object span {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}