Комментарии 43
О спасибо!!! Вас тоже с наступающим :)
+1
как не прискорбно, в итоге получилась лагающая открытка.
+9
да, памяти она требует не мало, но на рабочем компе ни в Лисе, ни в Хроме я тормозов не наблюдаю
0
У меня в FireFox лагает, в Chrome все плавно и красиво (правда загрузка одного из ядер 100%)
А вот ссылка внизу не до конца стоит: ссылкой является только «Вернуться к » без слова «статье». Некрасиво.
А вот ссылка внизу не до конца стоит: ссылкой является только «Вернуться к » без слова «статье». Некрасиво.
0
Четыре ядра по 60%. Хром.
Неэкологичненькая открытка :)
Неэкологичненькая открытка :)
+1
ужас, весь celeron-проц на моей бедной печатающей машинке занимает, видно не справляется с таким наплывом современности (у меня Chrome)
0
В результате получилась 502 ошибка. И вам с наступающим :D
0
Ну хоть бы с наступающим на картинке написали, а то до инфаркта доведете ж. ;-)
С Наступающим!
С Наступающим!
0
Если обратиться к оригиналу (кстати, ссылку можно было и вставить), то можно исправить тормозящую анимацию в ФФ: достаточно использовать полную форму записи в @keyframes вместо сокращенной.
Оригинал: designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/
Демо без тормозов: designshack.net/tutorialexamples/letitsnow/index.html
Оригинал: designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/
Демо без тормозов: designshack.net/tutorialexamples/letitsnow/index.html
+3
да, я читал эту статью, но мне результат не понравился и я решил своё наваять :)
и у меня полная форма записи в @keyframes, возможно, тормоза из-за шрифтов
и у меня полная форма записи в @keyframes, возможно, тормоза из-за шрифтов
-2
Круто, конечно.
А кстати, я не до конца понимаю, почему эффект, который рисовался на каком-нибудь 486-ом вовсе не жрал 50% процессорного времени, как делает ихний хром с вашей открытой?
Пару дней назад я попробовал поработать с canvas. Ради любопытства, решил попробовать повторить эффект из одной старой 512b intro.
Каждые 40 мс буфер рассчитывается простеньким алгоритмом и отображается на экране. Так вот, нагрузка на процессор была в районе 15%.
После этой статьи и личного опыта у меня сложилось не совсем хорошое мнение о современных бразуерных технлологиях связанных с графикой.
Разубедите меня в этом, пожалуйста :)
А кстати, я не до конца понимаю, почему эффект, который рисовался на каком-нибудь 486-ом вовсе не жрал 50% процессорного времени, как делает ихний хром с вашей открытой?
Пару дней назад я попробовал поработать с canvas. Ради любопытства, решил попробовать повторить эффект из одной старой 512b intro.
Каждые 40 мс буфер рассчитывается простеньким алгоритмом и отображается на экране. Так вот, нагрузка на процессор была в районе 15%.
После этой статьи и личного опыта у меня сложилось не совсем хорошое мнение о современных бразуерных технлологиях связанных с графикой.
Разубедите меня в этом, пожалуйста :)
+4
Время оптимизаций 2d 3d графики еще не пришло. К 25 версии хрома — допилят, и все что можно по обработке графики повесят на GPU
+1
486 рисовал практически сразу вам на экран, используя относительно низкоуровневые вызовы.
Хром же рисует через кучу прослоек: ХТМЛ, ЦСС, Парсер, Интерпретатор, ГрафическийДвижокОтрисовки, API ОС, Системные вызовы. Куча слоев, куча посредников. Бюроктария и коррупция! Как следствие — тормоза и жадное поглощение ресурсов.
Хром же рисует через кучу прослоек: ХТМЛ, ЦСС, Парсер, Интерпретатор, ГрафическийДвижокОтрисовки, API ОС, Системные вызовы. Куча слоев, куча посредников. Бюроктария и коррупция! Как следствие — тормоза и жадное поглощение ресурсов.
+3
Жаль, что не во всех браузерах работает, но выглядит просто потрясно!
+1
Как минимум, нужно избавиться от элемента #wrapper в коде, заменой BODY{} на HTML{}.
0
Ошибки и недочеты:
1) описали оперный префикс анимаций, но забыли указать запуск анимации для оперы в div#wrapper. В итоге, в ней снег не летит.
2) Текст не тянется. А ведь можно было сделать свгшный и резиновый.
3) Обычно говорят не «С рождеством и новым годом», а «С новым годом и рождеством», т.к. НГ наступает раньше.
4) Нет реакции на наведение на ссылку.
В целом симпатично.
1) описали оперный префикс анимаций, но забыли указать запуск анимации для оперы в div#wrapper. В итоге, в ней снег не летит.
2) Текст не тянется. А ведь можно было сделать свгшный и резиновый.
3) Обычно говорят не «С рождеством и новым годом», а «С новым годом и рождеством», т.к. НГ наступает раньше.
4) Нет реакции на наведение на ссылку.
В целом симпатично.
0
1) Где вы увидели «оперный префикс анимаций»? Там в конце написано, что в Опере анимация не работает, как и в IE ниже 10 версии.
2) можно было бы сделать
3) У католиков сначала Рождество, потом Новый Год. Да к тому же это всего лишь пример, каждый сам решит что там написать, если захочет её использовать.
4) Да ссылка там вообще лишний элемент :)
Спасибо, рад что понравилось.
2) можно было бы сделать
3) У католиков сначала Рождество, потом Новый Год. Да к тому же это всего лишь пример, каждый сам решит что там написать, если захочет её использовать.
4) Да ссылка там вообще лишний элемент :)
Спасибо, рад что понравилось.
0
Про оперу. Тут:
Да, вы правы, в опере пока не все работает. Значит код выше лишний, можно убрать.
@-o-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
Да, вы правы, в опере пока не все работает. Значит код выше лишний, можно убрать.
0
НЛО прилетело и опубликовало эту надпись здесь
Создаем новогоднюю открытку при помощи CSS3.
Наряжаем новогоднюю елочку при помощи Andurino.
Позовём Снегурочку при помощи Skype.
Купим подарочки на EBay.
Интернет-Новый Год приближается)
Наряжаем новогоднюю елочку при помощи Andurino.
Позовём Снегурочку при помощи Skype.
Купим подарочки на EBay.
Интернет-Новый Год приближается)
+1
Да это ж параллаксы на цсс, йопта!
Хорошая работа, спасибо за идею.
Хорошая работа, спасибо за идею.
+1
Вас тоже с Наступающим!
Похоже, что ваш пример положит начало обновлению моих знаний по CSS.
Похоже, что ваш пример положит начало обновлению моих знаний по CSS.
+1
Я за 6 мес ни разу не слышал, что бы мой Mac mini шумел. Думал, что у него пассивное охлаждение.
Но после 1-2 минут работы этой открытки в FF он ЗАШУМЕЛ вентилятором. Был в шоке, не мог понять что шумит :)
Но после 1-2 минут работы этой открытки в FF он ЗАШУМЕЛ вентилятором. Был в шоке, не мог понять что шумит :)
+1
Повесьте реферер на ссылку «Вернуться к статье», или history.back(). А то совсем не возвращает.
0
Надпись почему-то бьётся на 4 строчки и из-за уменьшеного line-height две буквы наезжают друг на друга (выделены жирным).
С
Рождеством
и Новым
Годом!
FF8, Linux.
С
Рождеством
и Новым
Годом!
FF8, Linux.
0
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Создаем новогоднюю открытку при помощи CSS3