Что в шапке тебе моей?

Вот уже несколько дней как в шапке «Да» можно наблюдать снему времени суток над Городом Ангелов. Увидел сие чудо на http://youlove.us/blog/. У себя они дали небольшое пояснение, как сделать такой фон.

(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 = Math.round(hourpercent + minutepercent);
 
	// calculate which pixel row to start graphic from based
	// on how far through the day we are
	var offset = backgroundheight / 100 * percentofday;
 
	// graphic starts at approx 6am, so adjust offset by 1/4
	var offset = offset - (backgroundheight / 4);
	function scrollbackground() {
		// decrease the offset by 1, or if its less than 1 increase it by
		// the background height minus 1
   		offset = (offset < 1) ? offset + (backgroundheight - 1) : offset - 1;
		// apply the background position
  		$('div#header').css("background-position", "50% " + offset + "px");
   		// call self to continue animation
   		setTimeout(function() {
			scrollbackground();
			}, 50
		);
   	}
	scrollbackground();
})(jQuery);

Казалось бы, что еще надо для счастья? Ведь есть готовый код, который корректно работает во всех браузерах. Подключай файлик да и все.

А если надо для нескольких элементов вызвать такой эффект? Код в таком виде прийдется дублировать. Надо что то делать… Вариант — оформть код, как дополнение к jQuery. Это и сделаем. В предидущей заметке были изложены основные требования к написанию плагинов. Руководствуясь ними и будем работать.

1. Создаем файл jquery.scroll_bg.js
2. Открываем его и для начала пишем:

jQuery.fn.scroll_bg = function(options){
};

Что такое options? Это объект, который содержит настройки, которые мы передаем в метод. Этот объект являет собой пары «ключ: значение». Правила «хорошего тона» требуют отпределить значения по умолчанию для передаваемых параметров. Сделаем это:

var options = jQuery.extend({
	bg_height: 1000, // Высота картинки-фона
	bg_timeout: 2000, // Таймаут между двумя прокручиваниями
	bg_image: ''// Картинка-фон
},options);

Далее, как и подобает, используем конструкцию return this.each для обработки всех объектов:

return this.each(function() {
});

В оригинальном коде есть часть, которая определяет начальное смещение картинки. Мне оно показалось не очень необходимым и я его убрал. Осталась только часть, которая непосредственно отвечает за прокручивание фона.

var offset = 0;
function scrollbackground(obj) {
	obj.css("background", "url('" + options.bg_image + "')"); // устанавливаем картинку-фон (на некоторых браузерах наблюдалось пропадание фона, посему пришлось добавить эту строку)
	offset = (offset < 1) ? offset + (options.bg_height - 1) : offset - 1;// выщитываем смещение
	obj.css("background-position", "50% " + offset + "px");// задаем смещение для 
	setTimeout(function() { // запускаем прокручивание через указанный интервал
		scrollbackground(obj);
		}, options.bg_timeout // тот самый интервал
	);
}
scrollbackground(jQuery(this)); // передаем в функцию текущий объект

Полный код плагина:

/***********************************************
 *
 * Scroll background jQuery plagin
 * Author: KronuS
 * Version: 1.0.0
 * Date: 14.09.2010
 *
 ***********************************************/
jQuery.fn.scroll_bg = function(options){
	var options = jQuery.extend({
		bg_height: 1000,
		bg_timeout: 2000,
		bg_image: ''
	},options);
	return this.each(function() {
		var offset = 0;
		function scrollbackground(obj) {
			obj.css("background", "url('" + options.bg_image + "')");
			offset = (offset < 1) ? offset + (options.bg_height - 1) : offset - 1;
			obj.css("background-position", "50% " + offset + "px");
			setTimeout(function() {
				scrollbackground(obj);
				}, options.bg_timeout
			);
		}
		scrollbackground(jQuery(this));
	});
};

Скачать | Демо

, , ,

2 комментария
  1. ULTRA Said:

    Круто! Эффект потрясающий! Сижу сейчас и любуюсь) *BRAVO*

  2. Hack_ERR Said:

    Неплохо)

Оставить комментарий

Top ↑ | Main page | Back