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

CATEGORY : column

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

top_catch

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

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

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

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

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

そしてCSSの記述

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

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

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

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

HTML

CSS

javascript

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

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

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

HTML

CSS

javascript(※前半部)

一旦ここで解説します。このサンプル03ではこちらの猫さんushi-aruku-bannerを横切らせています。画像のサイズは132×65です。今回は今までのサンプルと違いリピートしていない画像を横移動させる事が目的となります。なので変数acrossWidthには「横切らせたい要素の幅」が入ります。ここに画像の横幅を指定してしまうと当たり前ですが横切ってくれないです。そして変数posXには画像の横幅分を引いた-132を代入しています。これは、猫さんがノソノソ~っと頭から現れるのを表現したかった為この数値が代入されています。もしページを表示させた当初から表示されていても問題なければ0を代入していても構いません。 それでは続きのスクリプトです。

javascript(※後半部)

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

javascript(※全体像)

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