Создаем новогоднюю открытку при помощи CSS3

[WaReZ_MEN]

О спасибо!!! Вас тоже с наступающим :)

[Fedcomp]

как не прискорбно, в итоге получилась лагающая открытка.

[webmasters_by]

да, памяти она требует не мало, но на рабочем компе ни в Лисе, ни в Хроме я тормозов не наблюдаю

[Fedcomp]

Chrome 16, win7 x64, разрешение экрана 1600х900, хром развернут на весь экран, вкладки убраны, демонстрация подлагивает.

[ShadowPrince]

Аналогично, 1920*1080, на глаз, так, кадров 5 в секунду.
Chromium 14, Ubuntu 11.04. Компьютер приличный.

[Dimoniusis]

У меня в FireFox лагает, в Chrome все плавно и красиво (правда загрузка одного из ядер 100%)

А вот ссылка внизу не до конца стоит: ссылкой является только «Вернуться к » без слова «статье». Некрасиво.

[webmasters_by]

Спасибо за замечание, поправил.

[gymlyg]

в хроме плавно, но при переходе на начальное состояние анимации наблюдается скачок. Загрузка 24%.

[80x86]

Четыре ядра по 60%. Хром.

Неэкологичненькая открытка :)

[wartur]

ужас, весь celeron-проц на моей бедной печатающей машинке занимает, видно не справляется с таким наплывом современности (у меня Chrome)

[wartur]

ужас, в смысле у меня лаги, а идея прикольная ).

[Kane]

Ну а что вы хотели? Печатная машинка совмем для других целей нужна :)

[Isis]

В результате получилась 502 ошибка. И вам с наступающим :D

[webmasters_by]

Упс… :) Бывает, но теперь вроде уже всё работает

[stampoon]

Ну хоть бы с наступающим на картинке написали, а то до инфаркта доведете ж. ;-)
С Наступающим!

[webmasters_by]

:) да я подумал «гулять, так гулять», было конечно мысль еще canvas туда впихнуть, но пожалел посетителей :)

[fsmorygo]

И все-таки вариант с использованием canvas был бы более производительным. :)

[ChemAli]

Если обратиться к оригиналу (кстати, ссылку можно было и вставить), то можно исправить тормозящую анимацию в ФФ: достаточно использовать полную форму записи в @keyframes вместо сокращенной.

Оригинал: designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/
Демо без тормозов: designshack.net/tutorialexamples/letitsnow/index.html

[webmasters_by]

да, я читал эту статью, но мне результат не понравился и я решил своё наваять :)
и у меня полная форма записи в @keyframes, возможно, тормоза из-за шрифтов

[ChemAli]

Тогда, наверное, и в тексте стоит указать полную форму, а то вдруг кто-то скопирует и столкнется с проблемой.

[webmasters_by]

спасибо за замечание, исправил

[FreeTibet]

Круто, конечно.

А кстати, я не до конца понимаю, почему эффект, который рисовался на каком-нибудь 486-ом вовсе не жрал 50% процессорного времени, как делает ихний хром с вашей открытой?

Пару дней назад я попробовал поработать с canvas. Ради любопытства, решил попробовать повторить эффект из одной старой 512b intro.
Каждые 40 мс буфер рассчитывается простеньким алгоритмом и отображается на экране. Так вот, нагрузка на процессор была в районе 15%.

После этой статьи и личного опыта у меня сложилось не совсем хорошое мнение о современных бразуерных технлологиях связанных с графикой.

Разубедите меня в этом, пожалуйста :)

[drdim]

Время оптимизаций 2d 3d графики еще не пришло. К 25 версии хрома — допилят, и все что можно по обработке графики повесят на GPU

[ChemAli]

486 рисовал практически сразу вам на экран, используя относительно низкоуровневые вызовы.

Хром же рисует через кучу прослоек: ХТМЛ, ЦСС, Парсер, Интерпретатор, ГрафическийДвижокОтрисовки, API ОС, Системные вызовы. Куча слоев, куча посредников. Бюроктария и коррупция! Как следствие — тормоза и жадное поглощение ресурсов.

[MrMYSTIC]

Жаль, что не во всех браузерах работает, но выглядит просто потрясно!

[infinius]

Как минимум, нужно избавиться от элемента #wrapper в коде, заменой BODY{} на HTML{}.

[f0rmat1k]

Ошибки и недочеты:
1) описали оперный префикс анимаций, но забыли указать запуск анимации для оперы в div#wrapper. В итоге, в ней снег не летит.
2) Текст не тянется. А ведь можно было сделать свгшный и резиновый.
3) Обычно говорят не «С рождеством и новым годом», а «С новым годом и рождеством», т.к. НГ наступает раньше.
4) Нет реакции на наведение на ссылку.

В целом симпатично.

[webmasters_by]

1) Где вы увидели «оперный префикс анимаций»? Там в конце написано, что в Опере анимация не работает, как и в IE ниже 10 версии.
2) можно было бы сделать
3) У католиков сначала Рождество, потом Новый Год. Да к тому же это всего лишь пример, каждый сам решит что там написать, если захочет её использовать.
4) Да ссылка там вообще лишний элемент :)

Спасибо, рад что понравилось.

[f0rmat1k]

Про оперу. Тут:

@-o-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

Да, вы правы, в опере пока не все работает. Значит код выше лишний, можно убрать.

[webmasters_by]

Ну сегодня не работает, а выйдет новая версия и заработает. Так что пусть в исходниках будет.

[f0rmat1k]

Рекурсия. В таком случае, вам нужно запустить инициализацию в div#wrapper. Т.к. у вас пока только описание анимации, но нет запуска с префиксом оперы.

[webmasters_by]

да, верно подметили,
добавлю

[tetrapak07]

Создаем новогоднюю открытку при помощи CSS3.
Наряжаем новогоднюю елочку при помощи Andurino.
Позовём Снегурочку при помощи Skype.
Купим подарочки на EBay.
Интернет-Новый Год приближается)

[gymlyg]

и позвать в гости всех френдов с любимых ресурсов!

[johnnythekid]

Да это ж параллаксы на цсс, йопта!
Хорошая работа, спасибо за идею.

[gymlyg]

Вас тоже с Наступающим!
Похоже, что ваш пример положит начало обновлению моих знаний по CSS.

[phanta]

Я за 6 мес ни разу не слышал, что бы мой Mac mini шумел. Думал, что у него пассивное охлаждение.

Но после 1-2 минут работы этой открытки в FF он ЗАШУМЕЛ вентилятором. Был в шоке, не мог понять что шумит :)

[infinius]

Рассматривали открытку, что ли? :)

[phanta]

Ну да :)

[Shvonder]

Повесьте реферер на ссылку «Вернуться к статье», или history.back(). А то совсем не возвращает.

[kirilloid]

Надпись почему-то бьётся на 4 строчки и из-за уменьшеного line-height две буквы наезжают друг на друга (выделены жирным).
С
Рождеством
и Новым
Годом!

FF8, Linux.