スクロールで背景画像を別々に動かすパララックス効果

スクロールで背景画像を別々に動かすパララックス効果

通常背景画像は記事を下にスクロールすると一緒に移動するか、もしくは背景画像が固定された状態でしか設定できません。しかしJQueryを使うと背景画像が横、斜めなど好きな方向に動かすことができます。

今回は、パララックス効果のある2種類のサンプルとコードを紹介します。

スクロールすると雲の背景画像が横に動く

元のコードはアメブロのデザイン「気球に乗って」のコードを元に少アレンジして紹介してあります。

スクロールすると雲の背景画像が動く

サンプルを見ていただけば分かるとおりスクロールすると雲の背景画像が横に動きます。

  • 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。
  • このサンプルでは縦方向は0pxにしてあるので横方向のみ移動していきます。
  • スクロールすると背景が右に2pxづつ移動します。

htmlコード

htmlのコードは記事の外側を何かのdiv要素で囲まれていれば大丈夫です。

<div class="skinBody">
この中が記事などのコード
</div>

CSSコード

.skinBody{
background:#63c3eb url(背景画像のアドレス) fixed  0 0;
}

JQueryコード

<script type="text/javascript">
$(function() {
    var   bgsc1 = 0;
    var   bgsc2 = 0;
$(window).scroll(function() {
    bgsc1+= 2;//マイナスは左に、プラスは右に移動します。この場合だと2なので右に2pxづつ移動します。左に移動させる場合は-2に変えます。
    bgsc2+= 0;//マイナスは上に、プラスは下に移動。このサンプルは0にしてあるので上下には移動しません。
    $(".skinBody").css("background-position", bgsc1 + "px " + bgsc2 + "px");
});
});
</script>

スクロールすると星の背景画像が奥行がある感じで動く

元のコードはアメブロのデザイン「星々」のコードを元に少アレンジして紹介してあります。

スクロールすると星の背景画像が奥行がある感じで動く

サンプルを見ていただけば分かるとおりスクロールすると星の背景画像が奥行がある感じで動きます。

  • 背景画像を設置する要素名(id名やclass名)はサイトによって異なると思いますのでそれに合わせて要素名(id名やclass名)は変更してください。
  • 4つの要素に背景画像が設定してあり、1つは固定した背景画像で、もう1つは通常の背景画像が繰り返し設定してあり、残り2つがそれぞれ違う方向に移動していくので、奥行があるような感じの動きになります。

htmlコード

htmlのコードは記事の外側を何かの4つのdiv要素で囲まれていれば大丈夫です。

<div class="skinBody">
<div class="skinBody2">
<div class="skinBody3">
<div class="skinFrame">
この中が記事などのコード
</div>
</div>
</div>
</div>

CSSコード

.skinBody{
background:#02000b url(背景画像アドレス) fixed repeat-x repeat 0 0;
}
.skinBody2{
background:url(背景画像アドレス) repeat 0 0;
}
.skinBody3{
background:url(背景画像アドレス) repeat 0 0;
}
.skinFrame{
background:url(背景画像アドレス) repeat 0 0;
}

JQueryコード

<script type="text/javascript">
$(function() {
    var   bgsc1 = 0;
    var   bgsc2 = 0;
    var   bgsc3 = 0;
    var   bgsc4 = 0;
$(window).scroll(function() {
    bgsc1+= 3;//マイナスは左に、プラスは右に移動します。この例だと右に3pxづつ移動します。
    bgsc2+= 3;//マイナスは上に、プラスは下に移動します。この例だと下に3pxづつ移動します。
    bgsc3+= 3;
    bgsc4+= -2;
    $(".skinBody3").css("background-position", bgsc1 + "px " + bgsc2 + "px");
    $(".skinFrame").css("background-position", bgsc3 + "px " + bgsc4 + "px");
});
});
</script>

サンプルでは以上2種類のパララックス効果を紹介しましたが、使用する背景画像や移動方向など組み合わせによっては、かなりインパクトのあるデザインが作成できると思います。

最終更新日: 2013年3月11日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

スクロールで背景画像を別々に動かすパララックス効果の関連記事

スクロールで背景画像を別々に動かすパララックス効果” への2件のコメント

  1. はじめまして。
    利用させて頂きHPを作成させていただきました。
    知識が無いなかでこうも簡単に楽しいものができるとは驚きでありました。
    知人からの頼まれで、「ああ、いいよ」で受けたもののなかなか進まずそのなかでのこのサイト助かりました
    もし、時間がございましたら覗いていただき、アドバイスなどいただけましたら幸いです。
    ありがとうございました。

                                              おら・U-タン

                                        → http://honyaradoo.web.fc2.com/

    • コメントありがとうございます。
      お役に立てて良かったです。アドバイス等は現在時間がないので出来ませんが、出来上がった作品は作成者さんにとっては最高の出来になっていると思います。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*