[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト

背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。

The youlove.us scrolling background effect expained
demo: YOU LOVE.US

ヘッダ・フッタ・コンテンツの背景はアニメーションでスライドし、しばらく時間がたつとサイトの印象はガラッと変わります。

背景画像は下記のようになっており、ゆっくりとスライドします。

背景画像

スクリプトのベースにはjQueryが使用されており、下記のスクリプトをプラグインとして使用します。

$(function() {
	// ***
	// Scrolling background
	// ***

	// height of background image in pixels
	var backgroundheight = 4000;

	// get the current minute/hour of the day
	var now = new Date();
	var hour = now.getHours();
	var minute = now.getMinutes();

	// work out how far through the day we are as a percentage - e.g. 6pm = 75%
	var hourpercent = hour / 24 * 100;
	var minutepercent = minute / 60 / 24 * 100;
	var percentofday = hourpercent + minutepercent;

	// calculate which pixel row to start graphic from based on
	// how far through the day we are
 	var startoffset = backgroundheight / 100 * percentofday;

	// end 1x background height after the start offset so we get a smooth loop
	var endoffset = startoffset + backgroundheight;

   	function scrollbackground() {
		// set the background start position
		$('body').css({
			backgroundPosition: '50% -' + startoffset + 'px'
		});
		// animate through to the end
		$('body').animate({
			backgroundPosition:'(50% -' + endoffset + 'px)'
			},
			100000,
			"linear",
			function () {
				// callback to self to loop animation
				scrollbackground();
			}
		);
	}

	// start the animation
	scrollbackground();
}

Post on:2009年6月22日