Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2010, 13:42
Интересующийся
Отправить личное сообщение для grefon Посмотреть профиль Найти все сообщения от grefon
 
Регистрация: 17.03.2009
Сообщений: 12

Плывущий фон
Пожалуйста, подскажите как менее ресурсозатратно сделать плывущий фон на странице? Пробывал тремя разными способами:
1) с помощью плагина Background-Position.
2) с помщью вот такого скрипта:
$(function(){

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

	// 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
   		$('body').css("background-position", "50% " + offset + "px");
   		// call self to continue animation
   		setTimeout(function() {
			scrollbackground();
			}, 1
		);
   	}
    
	// Start the animation
	scrollbackground();

});

3) с помощью вот ткого:
var current = 0;            // Текущая строка пикселей

function scrollBg(){
    
    //Переходим к следующей строке пикселей
    current -= 1;
    
    //Если конец изображения, то переходим снова вверх
    if (current == -4000){
        current = 0;
    }
    
    //Устанавливаем CSS заголовка
    $('body').css("background-position","0 "+current+"px");
}

//Вызываем прокручивающую функцию повторно
var init = setInterval("scrollBg()", 0);


Бекфон стоит на боди. Сам рисунок фона весит 140кб. Во всех трех случаях скрипт полностью убивает одно ядро процессора. В фф так вообще тормозит жутко. Пробывал ставить фон на слой а не на боди и пробывал ставить рисунок полегче (60кб), результат всегда один и тот же - проц грузится до предела.

Посоветуйте, что делать? Уж очень нужен эффект плывущего фона.
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2010, 14:22
Аспирант
Посмотреть профиль Найти все сообщения от RedbuЯ
 
Регистрация: 01.05.2010
Сообщений: 30

А принципиально на javascript?
Если я Вас правильно понял....
Воможно HTML поможет? - например тег - <marquee>Демонстрация "Плывущего" или "Прокручивающегося" рисунка</marquee> + параметри
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2010, 14:28
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,245

Сообщение от grefon
        setTimeout(function() { 21            scrollbackground(); 22            }, 1 23        );
Сообщение от grefon
var init = setInterval("scrollBg()", 0);
скромнее надо быть, скромнее
выставьте таймаут побольше
PS http://javascript.ru/tutorial/object...ord#apply-call
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2010, 14:49
Интересующийся
Отправить личное сообщение для grefon Посмотреть профиль Найти все сообщения от grefon
 
Регистрация: 17.03.2009
Сообщений: 12

Сообщение от RedbuЯ Посмотреть сообщение
А принципиально на javascript?
Если я Вас правильно понял....
Воможно HTML поможет? - например тег - <marquee>Демонстрация "Плывущего" или "Прокручивающегося" рисунка</marquee> + параметри
Нет, marquee не подходит по всем категориям!

Сообщение от Gvozd Посмотреть сообщение
скромнее надо быть, скромнее
выставьте таймаут побольше
PS http://javascript.ru/tutorial/object...ord#apply-call
О! А вот это помогло, но, к сожалению не сильно. Таймаут поставил на 100 и загрузка проца стала под 30% (таймаут меньше 100 процессор не облегчает). Теперь хоть полегче, но картинка плывет не плавно а рывками
Ответить с цитированием
  #5 (permalink)  
Старый 04.08.2010, 14:57
Аватар для Gvozd
Матрос
Отправить личное сообщение для Gvozd Посмотреть профиль Найти все сообщения от Gvozd
 
Регистрация: 04.04.2008
Сообщений: 6,245

не ту ссылку кинул
http://javascript.ru/blog/Andrej-Par...cii-JavaScript
Ответить с цитированием
  #6 (permalink)  
Старый 04.08.2010, 15:49
Любитель
Отправить личное сообщение для JsLoveR Посмотреть профиль Найти все сообщения от JsLoveR
 
Регистрация: 16.12.2009
Сообщений: 422

Сообщение от grefon
картинка плывет не плавно а рывками
grefon, попробуйте больше пикселей брать current -= 50;
Ответить с цитированием
  #7 (permalink)  
Старый 04.08.2010, 16:15
Аспирант
Посмотреть профиль Найти все сообщения от RedbuЯ
 
Регистрация: 01.05.2010
Сообщений: 30

Вот как я вижу ето - возможно я вновь не прав
<BODY> 
 <body background="pic.jpg"> 
 
<script language="JavaScript"> 
<!-- Begin
var backgroundOffset = 0;
var bgObject = eval('document.body');
function scrollBG(maxSize) {
backgroundOffset = backgroundOffset + 1;
if (backgroundOffset > maxSize) backgroundOffset = 0;
bgObject.style.backgroundPosition = "0 " + backgroundOffset;
}
var ScrollTimer = window.setInterval("scrollBG(307)", 64);
// End -->
</script> 
</BODY>
Ответить с цитированием
  #8 (permalink)  
Старый 04.08.2010, 17:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,055

плывут по небу облака ....)))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
<style type="text/css">
body{
  background-image:url('http://www.the-best-site.ru/images/bg027.gif');
}
</style>
<script language="JavaScript" type="text/javascript">
window.setInterval(function () {
    if (!this.a || this.a < 0) this.a = 200;
    else this.a--;
    document.body.style.backgroundPosition = this.a + "px 100%"
}, 50);
</script>
</head>
<body></body>
</html>
Ответить с цитированием
  #9 (permalink)  
Старый 04.08.2010, 23:02
Интересующийся
Отправить личное сообщение для grefon Посмотреть профиль Найти все сообщения от grefon
 
Регистрация: 17.03.2009
Сообщений: 12

Всем большое спасибо за помощь. Остановился на вот этом варианте:
var current = 0;            // Текущая строка пикселей

function scrollBg(){
    
    //Переходим к следующей строке пикселей
    current -= 1;
    
    //Если конец изображения, то переходим снова вверх
    if (current == -2000){
        current = 0;
    }
    
    //Устанавливаем CSS заголовка
    $('body').css("background-position","0 "+current+"px");
}

//Вызываем прокручивающую функцию повторно
var init = setInterval("scrollBg()", 60);

Тесты показали, что это самый оптимальный вариант. Нагрузка на проц максимум 25%. Все остальные варианты перепробывал с различными параметрами и все они проиграли данному. Картинка плывет более-менее плавно и не тормазит.
Еще раз всем спасибо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Выровнять фон по центру. progressive Элементы интерфейса 3 13.04.2010 19:19
Фон сайта.Бесконечная анимация цвета mdbm Элементы интерфейса 10 22.03.2010 17:09
динамический фон страницы js Learx Events/DOM/Window 1 21.01.2010 18:04
Как сделать фон, главной страницы на изображении ? asked86 (X)HTML/CSS 3 03.04.2009 02:54
Как нарисовать такой фон сайта? SDron Общие вопросы Javascript 5 10.02.2009 15:58