randomised background scrolling effect


Description: 背景をアニメーションさせるjQueryプラグインです。テキストを書くことも出来ますし、透過された画像を重ねて表示させる事も可能です。IE6のために、DD_belatedPNGを併用させています。
Sample: demo
Tutorial: randomised background scrolling effect
License: -

Sample

Note

$(function() {
	// Define the height of your two background images.
           //The image to scroll
	   var backgroundheight = 2000;
           //The image to overlay
	   var backgroundheight_two = 1000;

	// Create a random offset for both images' starting positions
        offset = Math.round(Math.floor(Math.random()* 2001));
        offset2 = Math.round(Math.floor(Math.random()* 1001));

	function scrollbackground() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground();
			}, 100
		);
   	}
	function scrollbackground2() {
                //Ensure all bases are covered when defining the offset.
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// Put the background onto the required div and animate vertically
   		$('#container2').css("background-position", "50% " + offset + "px");
   		// Enable the function to loop when it reaches the end of the image
   		setTimeout(function() {
			scrollbackground2();
			}, 100
		);
   	}

	// Initiate the scroll
	scrollbackground();
	scrollbackground2();

	// Use the offset defined earlier and apply it to the div.
   		$('#overlay').css("background-position", "50% " + offset2 + "px");
   		$('#overlay2').css("background-position", "50% " + offset2 + "px");
});

軽量なプラグインですね。

Related snippet :

  • Description: シンプルなツールチップ。です。超軽量で、手軽に実装可能ですよ。アンカータグ内のtitleをツールチップに実装します。クロスブラウザで動作してくれるの ...
  • Description: スクロールに応じてアニメーションでサイドメニュー部分のみ追従してきます。IE6でも動作してくれるので、position:fixed;の替わりに使うの ...
  • Description: かっこいいエフェクトでメニューを呼び出すプラグイン。ゲームみたいですね・・・クロスブラウザでは動作しませんが、なかなか印象的な見せ方ではないかなと思 ...
  • Description: 省スペースでコンテンツが切り替わるボックスメニューです。ページ推移する事無く、そのメニュー項目の詳細を表示させます。IE6のみ表示が崩れますが、cs ...
  • Description: テーブルにヒートカラーを追加するプラグインです。色付けするとどうしても見にくいテーブルがとても可視性が高くなります。また、ソートも可能でクロスブラウ ...
  • Description: 背景に指定した画像をギャラリーにするプラグインです。IE6でも問題無し。背景指定なので、スライドショーの上に画像やテキストを自由に配置することも可能 ...
  • Description: グリッドを守ったレイアウトを構築するプラグインです。モニタサイズに依存することなく、時系列を崩さないレイアウトを守れます。 Sample: ...