Комментарии 44
Здорово! только очень грузит процессор (
+3
Очень важно понимать, с какой целью это делается. Если предполагается, что на сайте есть информация, которую будет читать посетитель, то двигающийся фон будет ему мешать.
Это как новогодние JS-снежинки на сайтах. Лично я каждый раз, видя их, борюсь с желанием сразу закрыть окно, не разбираясь, о чём сайт.
Это как новогодние JS-снежинки на сайтах. Лично я каждый раз, видя их, борюсь с желанием сразу закрыть окно, не разбираясь, о чём сайт.
+4
Я лично тоже снежинки ненавижу. Это задумывалось сугубо как eye-candy, не более того. Можно конечно скорость движения ещё меньше поставить, тогда напрягать практически не будет.
0
да, очень привлекает к себе внимание, трудно на тексте сконцентрироваться
0
По потере фокуса окном нужно анимацию тормозить, а запускать, соответственно, по получению фокуса. Это спасет отца русской демократии :)
0
Поправьте, пожалуйста, отступ после тега habracut.
0
В опере 9.5, SeaMonkey тоже нормально работает.
Вот только то, что загрузка проца достигает 100% что на опере, что на сафари не порадовало. Слишком уж это негативный эффект. Многое из-за этого может тормозить.
И еще - читать текст абсолютно нереально - анимация раздражает, сбивает. В особенности когда движущиеся части проползают сзади текста.
Вот только то, что загрузка проца достигает 100% что на опере, что на сафари не порадовало. Слишком уж это негативный эффект. Многое из-за этого может тормозить.
И еще - читать текст абсолютно нереально - анимация раздражает, сбивает. В особенности когда движущиеся части проползают сзади текста.
0
Давайте определимся, оно тормозит или просто грузит проц ? :) Если оно просто грузит проц, то какая разница, собственно-говоря ? У меня работает на ура.
0
Скажем так - паралельно работает компилятор, делает билд. У меня он стал работать медленнее. Вполне допускаю что это глюк моей боевой оперы, но не порадовало.
Но даже это не суть важно.
Архиватор, который попросил работать в фоновом режиме при просмотре страницы перестал работать. То есть приоритет, с которым оно обрабатывается явно выше, чем Idle.
Но даже это не суть важно.
Архиватор, который попросил работать в фоновом режиме при просмотре страницы перестал работать. То есть приоритет, с которым оно обрабатывается явно выше, чем Idle.
0
"Скажем так" (с) Я конечно ничего не компилирую и не архивирую, но :)
Т.к. я веб-разработчик, у меня перманентно открыты как минимум 4 браузера, я их перечислил внизу топика, на всех одновременно была открыта эта страница. При этом запущен ещё целый комбайн всякого ПО, память забита до отказа и ещё Виста в придачу стоит вместе с Aero, но ничего не тормозит, хотя и конфигурация компа не такая уж и сильная. У меня оно просто выводит что проц загружен, но тормозов никаких не наблюдается.
А вообще как гентушник со стажем в 3 года, скажу что компиляция всегда сказывается на работе компа в целом, если приоритет не понизить :)
Т.к. я веб-разработчик, у меня перманентно открыты как минимум 4 браузера, я их перечислил внизу топика, на всех одновременно была открыта эта страница. При этом запущен ещё целый комбайн всякого ПО, память забита до отказа и ещё Виста в придачу стоит вместе с Aero, но ничего не тормозит, хотя и конфигурация компа не такая уж и сильная. У меня оно просто выводит что проц загружен, но тормозов никаких не наблюдается.
А вообще как гентушник со стажем в 3 года, скажу что компиляция всегда сказывается на работе компа в целом, если приоритет не понизить :)
0
То, что ничего из открытого и активного тормозить не будет - я верю. Глазами это вижу. Если немного точнее: то, что работает не в фоне тормозить не будет, но анимация резко теряет свою привлекательно. Дрыгаться и заедать начинает - не знаю как это правильно по русски сказать. Не сильно, но глазом артефакты заметны.
А те приложения, что работаю в фоне с низким приоритетом начинают "тормозить". В большинстве случаев таких приложений у рядового пользователя нет, но мало-ли.
Вот, собственно, такие эффекты возникают на моем машине (достаточно слабой). Залипание анимации возникает если запустить приложение, которое дает заметную нагрузку на процессор.
А те приложения, что работаю в фоне с низким приоритетом начинают "тормозить". В большинстве случаев таких приложений у рядового пользователя нет, но мало-ли.
Вот, собственно, такие эффекты возникают на моем машине (достаточно слабой). Залипание анимации возникает если запустить приложение, которое дает заметную нагрузку на процессор.
0
Ну вот, теперь куча сайтов будет с крутящейся рекламой внизу/наверху :-)
На delfi.lv так делают кстати, как раз для показа баннера.
На delfi.lv так делают кстати, как раз для показа баннера.
0
НЛО прилетело и опубликовало эту надпись здесь
Когда увидел статью про этот эффект сразу захотелось сделать анимированную версию, но так и не смог придумать зачем это может понадобиться.
0
НЛО прилетело и опубликовало эту надпись здесь
Даешь демосцену в вебдизайн! :-)
+1
Красиво, но головокружительно.
0
эм... а ничего, что как раз "эффект джунглей" вы и не реализовали?
задумайтесь над смыслом перемещения лиан/ветвей в одну сторону ;)
задумайтесь над смыслом перемещения лиан/ветвей в одну сторону ;)
0
Эффект супер, да и отличная почва для экспериментов :) Вот только ресурсоемкость несколько напрягает..
0
Да, было бы по-медленнее.. :)
0
Молодец, конечно, что не поленился понять задницу, взять готовые решения (гуглхомпейдж, jQuery), готовую идею и показал как ты круто можешь изменять css свойства DOM элементов.
IE 6 не пашет многое, не только сам эффект. В остальных эффект подтормаживает, либо грузит проц. Не говоря уже о бесполезности эффекта.
Но, как я уже заметил, цель ты достигнул — рассказал всем как с помощью jQuery менять css свойства объектов.
IE 6 не пашет многое, не только сам эффект. В остальных эффект подтормаживает, либо грузит проц. Не говоря уже о бесполезности эффекта.
Но, как я уже заметил, цель ты достигнул — рассказал всем как с помощью jQuery менять css свойства объектов.
+1
А смещение не в одном направлении должно быть?
0
Теперь крутится в одну сторону :)
0
Открыл в IE6 - там мало того, что не работает, так ещё и канал мой забился на 100%.
Эту страницу прям можно вешать на стенд уязвимостей IE6 :)
Эту страницу прям можно вешать на стенд уязвимостей IE6 :)
0
1. Тормозит.
2. в ИЕ 6 не пашет. (и транспарент тоже)
3. Если я не ошибаюсь, то можно наложить флеш на бекграунд, может тоже выйти довольно мило.
Но идея классная, оценил. Так держать.
2. в ИЕ 6 не пашет. (и транспарент тоже)
3. Если я не ошибаюсь, то можно наложить флеш на бекграунд, может тоже выйти довольно мило.
Но идея классная, оценил. Так держать.
0
Ого, меня уже цитируют :)
0
при ресайзе окна анимация прекращается.
p.s. Когда ещё первый раз на smashingmagazine эту гориллу запостили, сразу заметил что в IE6 не работает, ибо бэкраунд PNG.
p.s. Когда ещё первый раз на smashingmagazine эту гориллу запостили, сразу заметил что в IE6 не работает, ибо бэкраунд PNG.
0
эффект красивый, но скажите, как часто вы ресайзите окно браузера, что бы узнать что есть какой-то эффект?
0
Мда... вот уже когда понимаешь что 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 и написать две строчки вместо пяти?!
меняем ваши подключения
на следующий код
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 и написать две строчки вместо пяти?!
+1
ОЧень понравилось, отлично! Но притормаживает.. обидно.. Еще опонравилось что библиотека jQuery нахходится на другом сайте
0
все хорошо, но обидно что IE6 всё портит, потому что у меня было уже появилась идейка, как это применить правильно и без визуального раздражения ;)
0
Зарегистрируйтесь на Хабре , чтобы оставить комментарий
Эффект джунглей.