Как стать автором
Обновить

Комментарии 44

Здорово! только очень грузит процессор (
Очень важно понимать, с какой целью это делается. Если предполагается, что на сайте есть информация, которую будет читать посетитель, то двигающийся фон будет ему мешать.
Это как новогодние JS-снежинки на сайтах. Лично я каждый раз, видя их, борюсь с желанием сразу закрыть окно, не разбираясь, о чём сайт.
Я лично тоже снежинки ненавижу. Это задумывалось сугубо как eye-candy, не более того. Можно конечно скорость движения ещё меньше поставить, тогда напрягать практически не будет.
Скорость определенно нужно уменьшать, иначе просто очень сильно отвлекает.
Для демонстрации техники скорость - самое то. Молодец, автор!
да, очень привлекает к себе внимание, трудно на тексте сконцентрироваться
По потере фокуса окном нужно анимацию тормозить, а запускать, соответственно, по получению фокуса. Это спасет отца русской демократии :)
Поправьте, пожалуйста, отступ после тега habracut.
В опере 9.5, SeaMonkey тоже нормально работает.
Вот только то, что загрузка проца достигает 100% что на опере, что на сафари не порадовало. Слишком уж это негативный эффект. Многое из-за этого может тормозить.
И еще - читать текст абсолютно нереально - анимация раздражает, сбивает. В особенности когда движущиеся части проползают сзади текста.
Давайте определимся, оно тормозит или просто грузит проц ? :) Если оно просто грузит проц, то какая разница, собственно-говоря ? У меня работает на ура.
Скажем так - паралельно работает компилятор, делает билд. У меня он стал работать медленнее. Вполне допускаю что это глюк моей боевой оперы, но не порадовало.

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

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

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

Вот, собственно, такие эффекты возникают на моем машине (достаточно слабой). Залипание анимации возникает если запустить приложение, которое дает заметную нагрузку на процессор.
Я понял о чём вы, я ж не спорю :)
Ну вот, теперь куча сайтов будет с крутящейся рекламой внизу/наверху :-)

На delfi.lv так делают кстати, как раз для показа баннера.
НЛО прилетело и опубликовало эту надпись здесь
Когда увидел статью про этот эффект сразу захотелось сделать анимированную версию, но так и не смог придумать зачем это может понадобиться.
НЛО прилетело и опубликовало эту надпись здесь
Даешь демосцену в вебдизайн! :-)
Между прочим, демки на JS и Flash существуют уже давно :)
Красиво, но головокружительно.
это из-за разнонаправленного скроллинга среднего и переднего плана.
если бы они скроллились в одну сторону - был бы эффект "вид из окна движущегося вагона" :)
эм... а ничего, что как раз "эффект джунглей" вы и не реализовали?
задумайтесь над смыслом перемещения лиан/ветвей в одну сторону ;)
done ;)
Эффект супер, да и отличная почва для экспериментов :) Вот только ресурсоемкость несколько напрягает..
Да, было бы по-медленнее.. :)
Молодец, конечно, что не поленился понять задницу, взять готовые решения (гуглхомпейдж, jQuery), готовую идею и показал как ты круто можешь изменять css свойства DOM элементов.

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

Но, как я уже заметил, цель ты достигнул — рассказал всем как с помощью jQuery менять css свойства объектов.
А смещение не в одном направлении должно быть?
Теперь крутится в одну сторону :)
Открыл в IE6 - там мало того, что не работает, так ещё и канал мой забился на 100%.
Эту страницу прям можно вешать на стенд уязвимостей IE6 :)
Ну я писал внизу что я эту штуку в IE6 даже не открывал. Все вместе взятое весит 400кб, кода там почти ничего - только рисунки.
Как я понял, он начинает эту фоновую картинку запрашивать в бесконечном цикле и за счёт этого и появляется такой эффект.
1. Тормозит.
2. в ИЕ 6 не пашет. (и транспарент тоже)
3. Если я не ошибаюсь, то можно наложить флеш на бекграунд, может тоже выйти довольно мило.

Но идея классная, оценил. Так держать.
1. У меня - нет :)
2. Смотреть самую последнюю строку топика :)
3. Можно, не люблю флеш :) В смысле люблю, но не для этого.
Ого, меня уже цитируют :)
Нужно было вставить какой-то текст, на lipsum.com лезть было лень :)
Ладно, чего уж теперь :)
при ресайзе окна анимация прекращается.

p.s. Когда ещё первый раз на smashingmagazine эту гориллу запостили, сразу заметил что в IE6 не работает, ибо бэкраунд PNG.
эффект красивый, но скажите, как часто вы ресайзите окно браузера, что бы узнать что есть какой-то эффект?
я часто. но у меня два монитора 1680х1050. =)
Сайт пиарился таким способом, чтобы люди смотрели этот эффект :) На sm даже отдельно статья была :)
Мда... вот уже когда понимаешь что 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 и написать две строчки вместо пяти?!
ОЧень понравилось, отлично! Но притормаживает.. обидно.. Еще опонравилось что библиотека jQuery нахходится на другом сайте
все хорошо, но обидно что IE6 всё портит, потому что у меня было уже появилась идейка, как это применить правильно и без визуального раздражения ;)
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории