Dialog Dec 28 2011 at 08:03

Новогодний баннер на сайт при помощи CSS3

3 min

10K

CSS*

+21

Comments 26

AHrEJI Dec 28 2011 at 08:20

В опере 11.60 анимации нет :(
В ФФ 9 есть, но отжирает 50% процессора…

Dialog Dec 28 2011 at 08:25

Насчет оперы указал в заключении, что не смог добиться. Буду рад услышать варианты решений, хотя бы в какую сторону копать :)
По поводу ФФ9, не знаю, возможно анимация действительно много съедает ресурсов, хотя тестировал на ФФ8, такой проблемы не увидел.

AxisPod Dec 28 2011 at 08:25

На моем компе в хроме 25% загрузка.

Flam Dec 28 2011 at 14:34

Наверно у вас 4 ядра, а у первого комментатора 2 ))

cst Dec 28 2011 at 09:00

firefox 11a (Aurora) 4-5%

Fedcomp Dec 28 2011 at 09:15

скоро баннеры будут пихать через css import? :)

Dialog Dec 28 2011 at 10:10

Ну картинки пихают в сами файлы css. Пример этот datapicker, пусть и всего лишь иконка, но тем не менее. Остается прописать import при необходимых условиях для нас ;)

Fedcomp Dec 28 2011 at 12:08

а клик реализовать через :before и :after? :)

Dialog Dec 28 2011 at 12:48

Можно попробовать через :focus, и главное никакой браузер не скажет, что небезопасный javascript :)

TheShock Dec 28 2011 at 17:02

Тогда уж :active? =)

-1

Dialog Dec 28 2011 at 17:08

Можно ссылкой сделать и прописать :target :)

rharunzade Dec 28 2011 at 09:30

у меня в хроме Adblock Plus зарезал баннер.

svuser Dec 28 2011 at 09:35

как сделать как на sberbank.ru?

Dialog Dec 28 2011 at 10:06

А там так же несколько слоев использованы для снега, в body основная текстура, есть домолнительная текстура названа в snow-1, а в snow-2 и snow-3 текстуры со снегом, и точно такая же анимация, только сделана с помощью javascript и библиотеки jquery, что даст большую кроссбраузерность и возможно не будет нагрузки на процессор, о которых указано выше

mgarin Dec 28 2011 at 12:49

Лучше так вообще не делать — у них на сайте 5+ флэшек, Java апплет и ещё эта ужасная анимация на фоне, которая всё вешает… Лучше так не делать :)

Denai Dec 28 2011 at 10:24

Эм… баннеры, выжирающие весь процессор — это ж сверхсовременно!

zim32 Dec 28 2011 at 13:24

Ну как. Большая разница. 50% флеш — это плохо, 50% CSS3 это круто и современно )

WilliamKidd Dec 28 2011 at 10:28

Говорят, на странице логина mail.yandex.ru/ тоже какие-то крутые CCS3 штуки сделали.

MrMYSTIC Dec 28 2011 at 12:00

Весьма недурно выглядит.

TheShock Dec 28 2011 at 17:04

Кстати, тут есть все ноты и, наконец-то, можно сыграть, скажем Smoke on The Water. Но из-за задержки воспроизведения звука — сложно сыграть что-то ритмически =(

-1

WilliamKidd Dec 29 2011 at 11:53

www.youtube.com/watch?v=-QAChuT8OwM :)

ShpuntiK Dec 28 2011 at 13:10

Рывками идёт в фф9 и хроме… В опере вообще не работает, жаль.

zKeep Dec 28 2011 at 13:19

Ноутбук с процессором Pentium Dual Core T4500@2.300 GHz.
Нагрузка на процессор 47% при открытом окне с баннером.

Isis Dec 28 2011 at 15:55

Вообще ничего не подлагивает. Отлично работает.
windows 7, ff 9
Нагрузка 8%

bost84 Dec 28 2011 at 15:59

с чего бы анимации в опере работать если префикса -o- у анимации нет…
кстати -ms- тоже…

-2

Dialog Dec 28 2011 at 16:47

Не в префиксах счастье, а в доках и тестах. По ссылке есть архив, можете скачать и попробовать префиксы вставить, если получится анимация будет клево :)

Show the best of all time