Эффект джунглей.

[rozboris]

Здорово! только очень грузит процессор (

[putnik]

Очень важно понимать, с какой целью это делается. Если предполагается, что на сайте есть информация, которую будет читать посетитель, то двигающийся фон будет ему мешать.
Это как новогодние JS-снежинки на сайтах. Лично я каждый раз, видя их, борюсь с желанием сразу закрыть окно, не разбираясь, о чём сайт.

[n1mnul]

Я лично тоже снежинки ненавижу. Это задумывалось сугубо как eye-candy, не более того. Можно конечно скорость движения ещё меньше поставить, тогда напрягать практически не будет.

[Pancake]

Скорость определенно нужно уменьшать, иначе просто очень сильно отвлекает.

[dmitriev_dmitry]

Для демонстрации техники скорость - самое то. Молодец, автор!

[bdsoft]

да, очень привлекает к себе внимание, трудно на тексте сконцентрироваться

[DorBer]

По потере фокуса окном нужно анимацию тормозить, а запускать, соответственно, по получению фокуса. Это спасет отца русской демократии :)

[likegroof]

Поправьте, пожалуйста, отступ после тега habracut.

[steck]

В опере 9.5, SeaMonkey тоже нормально работает.
Вот только то, что загрузка проца достигает 100% что на опере, что на сафари не порадовало. Слишком уж это негативный эффект. Многое из-за этого может тормозить.
И еще - читать текст абсолютно нереально - анимация раздражает, сбивает. В особенности когда движущиеся части проползают сзади текста.

[n1mnul]

Давайте определимся, оно тормозит или просто грузит проц ? :) Если оно просто грузит проц, то какая разница, собственно-говоря ? У меня работает на ура.

[steck]

Скажем так - паралельно работает компилятор, делает билд. У меня он стал работать медленнее. Вполне допускаю что это глюк моей боевой оперы, но не порадовало.

Но даже это не суть важно.
Архиватор, который попросил работать в фоновом режиме при просмотре страницы перестал работать. То есть приоритет, с которым оно обрабатывается явно выше, чем Idle.

[n1mnul]

"Скажем так" (с) Я конечно ничего не компилирую и не архивирую, но :)

Т.к. я веб-разработчик, у меня перманентно открыты как минимум 4 браузера, я их перечислил внизу топика, на всех одновременно была открыта эта страница. При этом запущен ещё целый комбайн всякого ПО, память забита до отказа и ещё Виста в придачу стоит вместе с Aero, но ничего не тормозит, хотя и конфигурация компа не такая уж и сильная. У меня оно просто выводит что проц загружен, но тормозов никаких не наблюдается.

А вообще как гентушник со стажем в 3 года, скажу что компиляция всегда сказывается на работе компа в целом, если приоритет не понизить :)

[steck]

То, что ничего из открытого и активного тормозить не будет - я верю. Глазами это вижу. Если немного точнее: то, что работает не в фоне тормозить не будет, но анимация резко теряет свою привлекательно. Дрыгаться и заедать начинает - не знаю как это правильно по русски сказать. Не сильно, но глазом артефакты заметны.
А те приложения, что работаю в фоне с низким приоритетом начинают "тормозить". В большинстве случаев таких приложений у рядового пользователя нет, но мало-ли.

Вот, собственно, такие эффекты возникают на моем машине (достаточно слабой). Залипание анимации возникает если запустить приложение, которое дает заметную нагрузку на процессор.

[n1mnul]

Я понял о чём вы, я ж не спорю :)

[vvd]

Ну вот, теперь куча сайтов будет с крутящейся рекламой внизу/наверху :-)

На delfi.lv так делают кстати, как раз для показа баннера.

[Jenek]

Когда увидел статью про этот эффект сразу захотелось сделать анимированную версию, но так и не смог придумать зачем это может понадобиться.

[unbeliever]

Даешь демосцену в вебдизайн! :-)

[Tails]

Между прочим, демки на JS и Flash существуют уже давно :)

[neithere]

Красиво, но головокружительно.

[hlomzik]

эм... а ничего, что как раз "эффект джунглей" вы и не реализовали?
задумайтесь над смыслом перемещения лиан/ветвей в одну сторону ;)

[n1mnul]

done ;)

[lordeg]

Эффект супер, да и отличная почва для экспериментов :) Вот только ресурсоемкость несколько напрягает..

[trueHemp]

Да, было бы по-медленнее.. :)

[mobilz]

Молодец, конечно, что не поленился понять задницу, взять готовые решения (гуглхомпейдж, jQuery), готовую идею и показал как ты круто можешь изменять css свойства DOM элементов.

IE 6 не пашет многое, не только сам эффект. В остальных эффект подтормаживает, либо грузит проц. Не говоря уже о бесполезности эффекта.

Но, как я уже заметил, цель ты достигнул — рассказал всем как с помощью jQuery менять css свойства объектов.

[xalexx]

А смещение не в одном направлении должно быть?

[n1mnul]

Теперь крутится в одну сторону :)

[Power]

Открыл в IE6 - там мало того, что не работает, так ещё и канал мой забился на 100%.
Эту страницу прям можно вешать на стенд уязвимостей IE6 :)

[n1mnul]

Ну я писал внизу что я эту штуку в IE6 даже не открывал. Все вместе взятое весит 400кб, кода там почти ничего - только рисунки.

[Power]

Как я понял, он начинает эту фоновую картинку запрашивать в бесконечном цикле и за счёт этого и появляется такой эффект.

[n0nam3]

1. Тормозит.
2. в ИЕ 6 не пашет. (и транспарент тоже)
3. Если я не ошибаюсь, то можно наложить флеш на бекграунд, может тоже выйти довольно мило.

Но идея классная, оценил. Так держать.

[n1mnul]

1. У меня - нет :)
2. Смотреть самую последнюю строку топика :)
3. Можно, не люблю флеш :) В смысле люблю, но не для этого.

[CurlyBrace]

Ого, меня уже цитируют :)

[n1mnul]

Нужно было вставить какой-то текст, на lipsum.com лезть было лень :)

[CurlyBrace]

Ладно, чего уж теперь :)

[minixan]

при ресайзе окна анимация прекращается.

p.s. Когда ещё первый раз на smashingmagazine эту гориллу запостили, сразу заметил что в IE6 не работает, ибо бэкраунд PNG.

[BACRHR]

эффект красивый, но скажите, как часто вы ресайзите окно браузера, что бы узнать что есть какой-то эффект?

[minixan]

я часто. но у меня два монитора 1680х1050. =)

[n1mnul]

Сайт пиарился таким способом, чтобы люди смотрели этот эффект :) На sm даже отдельно статья была :)

[lahmatiy]

Мда... вот уже когда понимаешь что JS-фрейворки это зло :)
меняем ваши подключения


на следующий код

window.onload = function(){
var f = document.getElementById('foreground');
var m = document.getElementById('midground');
var fx = 0;
var mx = 0;
try { document.execCommand("BackgroundImageCache", false, true); } catch(e) {}; // это мы включаем кеш картинок для IE6, иначе будет постоянно пытаться что-то там обновить
setInterval(function(){
f.style.backgroundPosition = (fx += 1) + 'px 0';
m.style.backgroundPosition = (mx -= 1) + 'px 0';
}, 50); // меняем число миллисекунд между кадрами,
// меньше милисекунд скорость будет выше,
// больше - скорость меньше
};

у #midground и #foreground ставим left: 0 и width: 100%
У #overflow убираем height и overflow.
Все! Никаких jQuery (вы бы еще с документацией скрипт подцепили). Намного меньше грузит процессор. Работает везде (даже в IE6, правда в IE не поддерживаются полупрозрачные png). Разве это сложнее чем, подключить jQuery и написать две строчки вместо пяти?!

[BFox]

ОЧень понравилось, отлично! Но притормаживает.. обидно.. Еще опонравилось что библиотека jQuery нахходится на другом сайте

[BassEast]

все хорошо, но обидно что IE6 всё портит, потому что у меня было уже появилась идейка, как это применить правильно и без визуального раздражения ;)