たった数行でパララックス（視差効果）を実装する方法【jQuery】

jQueryでちょっとコードを足すだけでパララックス（視差効果）が簡単に実装できちゃうソースコードとデモページを公開しています。

パララックスとは

スクロールに合わせて背景画像や要素を異なる速度で動かす手法です。奥行き感が出るため、最近のWebデザインでは非常によく使われています。

実装コード（jQuery）

基本的なスクリプトは以下の通りです。windowのスクロールイベントを監視し、背景のbackground-positionを調整します。

$(window).scroll(function() {
    var scrolled = $(window).scrollTop();
    $('.parallax').css('background-position', 'center ' + -(scrolled * 0.5) + 'px');
});

このスクリプトに、対象エリアのCSSで background-attachment: fixed; を指定するか、または計算値を動的に適用させることで実装可能です。

注意点

• モバイル端末ではスクロールイベントの重さに注意が必要です。
• パフォーマンスを考慮し、requestAnimationFrame を使用することをおすすめします。