【JQuery】リピート表示させた背景画像をエンドレスでスライドさせる方法

2015.2.6 (金)
top_catch

JQueryを使用し背景画像を横にスライドさせる方法

今回はJQueryの記事になります。まさに、上のメインキャッチでやっているのですが、リピート表示させた背景画像をエンドレスで動かしたいなと思いネット上で探してみました。するとツーブロッカさんの記事が見つかりましたのでこちらを参考にスクリプトをいじってみました。

オーソドックスな横移動パターン

まずは、htmlとcssから成形していきます。JQueryを使用しますので<head>内にJQuery本体を読み込んでおいて下さい。verは1.7.2以外を試してないですが、これ以降のverであれば問題無いかと思われます。

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>

動く背景を導入したい箇所に下記のHTMLを記述して下さい。

<div id=”sample01″>&nbsp;</div>

そしてCSSの記述

#sample01{
background-image:url(ファイルパス);
background-repeat:repeat;
}

上記で準備OKです。それでは、JSの記述です。画像のサイズ等は適宜環境に合わせて変更してくださいね!。外部JSファイルまたは、<head>内に<script>タグで記述されて下さい。※外部ファイルとして読み込むパターンでも<head>内に書き込むパターンであっても必ずJQuery本体を読み込んだ後に記述されて下さい。

$(function(){
$(“#sample01”).css(“background-position” , “0% bottom”);//横に流したい=Xの値を動かすため、Xの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgWidth = 500;//画像の幅
var posX = 0;//背景のスタート位置(この後の記述でこの変数posXの数値が増加する事で背景画像の移動が可能となります)
setInterval(function(){
if(posX >= imgWidth){ posX = 0; }//変数posXの値が画像の横幅の数値まで増加したらposXの値を0に戻す
posX += scrollSpeed;//posXの値に、scrollSpeedの値を足していく
$(“#sample01”).css(“background-position” , posX + “px bottom”)//上でどんどん増加するposXをbackground-positionの横位置に挿入
} , 50);//移動スピードを変更したい時はこの「50」の数値を増減させる
});

上記スクリプトの詳しい解説はツーブロッカさんの記事でされているのでコメントアウトの内容を付け足すだけにしています。ちなみに完成図はこちらのサンプル01です。

縦方向に移動させるパターン

では今度は縦方向に移動させてみようと思います。HTMLとCSSの記述は基本的にはsample01と同じです。

HTML

<div id=”sample02″>&nbsp;</div>

CSS

#sample02{
background-image:url(ファイルパス);
background-repeat:repeat;
}

javascript

$(function(){
$(“#sample02”).css(“background-position” , “left 0%”);//縦に流したい=Yの値を動かすため、Yの値にあたる部分を「0%」としています。
var scrollSpeed = 1;//px 移動する量
var imgHeight = 242;//画像の高さ
var posY = 0;//背景のスタート位置
setInterval(function(){
if(posY >= imgHeight){ posY = 0; }//変数posYの値が画像の横幅の数値まで増加したらposYの値を0に戻す
posY += scrollSpeed;
$(“#sample02”).css(“background-position” , “left ” + posY + “px”)//上でどんどん増加するposYをbackground-positionの縦位置に挿入
} , 50);
});

縦方向の移動なのでbackground-positionの縦位置を増加するように変更するのと、変数posYのリセットする値を画像の高さに変更する位で元々のスクリプトからさほど変更点はありませんが、これで縦方向に移動するようになります。完成図はこちらのサンプル02です。

繰り返しをしていない画像を横方向に移動させる

このスクリプトを扱いながら、動物が歩いて横切って行くような事も可能だなと思い作ってみました。

HTML

<div id=”sample03″>&nbsp;</div>

CSS

#sample03{
background-image:url(ファイルパス);
background-repeat:no-repeat;
}

javascript(※前半部)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置

一旦ここで解説します。このサンプル03ではこちらの猫さんushi-aruku-bannerを横切らせています。画像のサイズは132×65です。今回は今までのサンプルと違いリピートしていない画像を横移動させる事が目的となります。

なので変数acrossWidthには「横切らせたい要素の幅」が入ります。ここに画像の横幅を指定してしまうと当たり前ですが横切ってくれないです。そして変数posXには画像の横幅分を引いた-132を代入しています。これは、猫さんがノソノソ~っと頭から現れるのを表現したかった為この数値が代入されています。もしページを表示させた当初から表示されていても問題なければ0を代入していても構いません。それでは続きのスクリプトです。

javascript(※後半部)

setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

ここで重要になるのは2行目の「if(posX >= acrossWidth){ posX = -132; }」になります。ここはサンプル1、2でもコメントで解説していますが、posXがacrossWidthの値になった時という条件文です。今までと同じように「if(posX >= acrossWidth){ posX = 0; }」と記述してしまうと、猫さんが指定された範囲を横切り終わった時に突然左端に現れてしまいます。できれば自然な感じで猫さんには頭から徐々に現れて欲しいので画像の横幅分を差引いた分をposXには代入しています。ではこのスクリプトの全体像です。

javascript(※全体像)

$(function(){
$(“#sample03”).css(“background-position” , “0% bottom”);//横移動なのでXの数値を0%に
var scrollSpeed = 1;//px 移動する量
var acrossWidth = 500;//横切らせたい要素の幅
var posX = -132;//背景のスタート位置
setInterval(function(){
if(posX >= acrossWidth){ posX = -132; }//posXがacrossWidthの値になった時画像の横幅を差引いた分の位置に戻す
posX += scrollSpeed;
$(“#sample03”).css(“background-position” , posX+”px bottom”)
} , 50);
});

完成図はこちらのサンプル03です。いかがでしょうか?静止画より少しだけ楽しげになりませんか?今後もニワカソフト一同日々勉強してニワカソフトで提供できる物の可能性を広げてまいります!!