CSS3-анимация вместо эффектов jQuery
Четверг, 20 мая 2010
Пока CSS3 и HTML5 остаются технологиями «для личных проектов» и поражают нас своими теоретическими возможностями, отдельные разработчики уже сейчас пишут на них вполне жизнеспособные элементы дизайна, способные незаметно приживаться на сайтах.
Несколькими такими примерами, найденными на блоге tobypitman.com хочу поделиться в этом обзоре.
К слову, наибольшего вау-эффекта от просмотра можно ожидать только в webkit-браузерах (Chrome и Safari), так как анимация в примерах основана на (проприетарных) методах -webkit-animation-… В Firefox и Opera демки тоже вполне рабочие, но уже без «красивостей».
CSS3 jQuery style menu
Довольно незатейливое меню-закладки. Туториал и демо можно найти тут.
Несмотря на довольно простой внешний вид, скажу, что если приложить совсем небольшие усилия к этому примеру (поменять размеры, фон, и позицию ссылок, а также чуть изменив анимацию), то легко можно получить аналог верхнего графического меню, как в этом блоге.
А с помощью jQuery пришлось бы писать как-то так.
Dynamic CSS3 Animated Accordian Menu
Код для примера и ссылка на демо на этой странице.
Ещё одна вещь, которая, несмотря на простое оформление, скрывает в себе неплохие возможности при написании всего лишь пары свойств -webkit-transition. Для сравнения, в jQuery пришлось бы писать нечто такое плюс дописывать эффекты для плавного затухания фона под ссылками.
Pure CSS Sliding Image Gallery
И, наконец, самый красивый пример CSS-фотогалереи можно увидеть тут. Можно даже сказать, что это упрощённый вариант Galleria, но от этого не теряется привлекательность и применимость этой галереи.
P. S. : Целью поста было показать несколько примеров CSS3-анимации и насколько просто её реализовать без использования JavaScript. Некоторые из примеров уже сейчас вполне работоспособны (хоть и с оговорками) и, в ближайшей перспективе, их можно будет использовать в своих проектах.
Вопросы по работе примеров в разных браузерах оставим за рамками обсуждения поста (уже тысячу раз всё было сказано и теми, кто сомневается, и теми, кто за перспективные технологии).
На комментарии критиков: «Не работает в IE», реагировать не буду. Надоело. Пишите в Microsoft.
* * *
Постовой
В своем блоге Сосновский делится наблюдениями в Adsense.
* * *
* * *
Понравилась статья?
Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:
* * *
Если говорить не только об анимации, то во еще примеры, когда (иногда) можно обойтись CSS 3 вместо Javascript: webdesignledger.com/tutor...ike-interactions
Да, спасибо. Примеры вполне попадают в формат статьи.
Очень эффектно, ничего не скажешь! Хорошо, что теперь не надо будет JS изучать дополнительно ))
Красиво, конечно. Но вот вопросик) Не сильно ли это сайт загружает?
Мда, очень красиво, но грузить по-моему будет не по-детски...((:(
К jQuery привык больше...
Очень понравился пример фотогалереи. Надо будет заюзать где-нибудь у себя.
Классная фото галерея очень понравилась) Попробую себе ее поставить.
Красиво) Это было последней каплей для того чтобы заставить себя уже выучить css))
CSS открывает новые горизонты, что тут еще скажешь. Красиво и оригинально. Надо будет обязательно попробовать.
CSS 3 стремится к облегчению верстки очень что не может не радовать
Наконец-то новые технологии решают простые задачки для сайтов. Игра: как сделать красивый сайт и меньше скрипта скоро закончится. CSS решит многие проблемы.