jQuery

【jQuery】背景画像を自動スクロールさせるプラグインjQuery.BackgroundScroll.js

November 11, 2015

jQuery.BackgroundScroll.jsは自動でCSS背景画像をスクロールさせるjQueryプラグイン。複数の画像を上下左右斜め方向へ別々の速度でスクロールさせられるそうです。日本人の方が作られたプラグインなので説明で分かり難い部分はないと思います。

JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.backgroundScroll.js" type="text/javascript"></script>
<script>
    $('body').backgroundScroll({
        img: ['img/back1.png', 'img/back2.png'],
        directionX: 'right',
        directionY: 'bottom',
        speed: [0.8, 0.5],
        imageWidth: [2000],
        imageHeight: [2000]
    });
</script>

オプション

img
背景画像として配置する画像のパス。

directionX
X軸のスクロールする方向。’right’, ‘left’ の指定が可能。
デフォルト = ‘right’

directionY
Y軸のスクロールする方向。 ‘top’, ‘bottom’ の指定が可能。

デフォルト = ‘bottom’
speed
1m秒ごとにスクロールする距離(ピクセル)。
デフォルト = 0.8

imageWidth
背景画像の横幅のサイズ。リピートの基準になります。

imageHeight
背景画像の縦幅のサイズ。リピートの基準になります。
Demo/Download