簡易パララックススクロール

by iwbjp

HTML

<div id="bg1">
    <div id="bg2">
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
        <p>テキストが入ります。</p>
    </div>
    <!--//#bg2-->
</div>
<!--//#bg1-->

CSS

p {
    margin-bottom: 500px;
    font-size: 100px;
}
html {
    background: url(bg_back.png) repeat center top;
}
body {
    background: url(bg_front.png) repeat center top;
}

JavaScript

$(function () {
    $(window).on('load scroll', function () {
        var scrollpx = $(this).scrollTop();
        var bg = scrollpx / 10;
        $("body").css("background-position", "center " + bg + 'px');
    });
});