CSS3-анимация вместо эффектов jQuery

CSS3-анимация вместо эффектов jQuery

Пока CSS3 и HTML5 остаются технологиями «для личных проектов» и поражают нас своими теоретическими возможностями, отдельные разработчики уже сейчас пишут на них вполне жизнеспособные элементы дизайна, способные незаметно приживаться на сайтах.

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

К слову, наибольшего вау-эффекта от просмотра можно ожидать только в webkit-браузерах (Chrome и Safari), так как анимация в примерах основана на (проприетарных) методах -webkit-animation-… В Firefox и Opera демки тоже вполне рабочие, но уже без «красивостей».

CSS3 jQuery style menu

css3-bookmarks

Довольно незатейливое меню-закладки. Туториал и демо можно найти тут.

Несмотря на довольно простой внешний вид, скажу, что если приложить совсем небольшие усилия к этому примеру (поменять размеры, фон, и позицию ссылок, а также чуть изменив анимацию), то легко можно получить аналог верхнего графического меню, как в этом блоге.

А с помощью jQuery пришлось бы писать как-то так.

Dynamic CSS3 Animated Accordian Menu

Dynamic CSS3 Animated Accordian Menu

Код для примера и ссылка на демо на этой странице.

Ещё одна вещь, которая, несмотря на простое оформление, скрывает в себе неплохие возможности при написании всего лишь пары свойств -webkit-transition. Для сравнения, в jQuery пришлось бы писать нечто такое плюс дописывать эффекты для плавного затухания фона под ссылками.

Pure CSS Sliding Image Gallery

CSS3-анимация вместо эффектов jQuery

И, наконец, самый красивый пример CSS-фотогалереи можно увидеть тут. Можно даже сказать, что это упрощённый вариант Galleria, но от этого не теряется привлекательность и применимость этой галереи.

P. S. : Целью поста было показать несколько примеров CSS3-анимации и насколько просто её реализовать без использования JavaScript. Некоторые из примеров уже сейчас вполне работоспособны (хоть и с оговорками) и, в ближайшей перспективе, их можно будет использовать в своих проектах.

Вопросы по работе примеров в разных браузерах оставим за рамками обсуждения поста (уже тысячу раз всё было сказано и теми, кто сомневается, и теми, кто за перспективные технологии).

На комментарии критиков: «Не работает в IE», реагировать не буду. Надоело. Пишите в Microsoft.

* * *

Постовой

В своем блоге Сосновский делится наблюдениями в Adsense.

* * *

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 13

  1. @ Cuprum, 20.05.2010 в 8:52

    Если говорить не только об анимации, то во еще примеры, когда (иногда) можно обойтись CSS 3 вместо Javascript: webdesignledger.com/tutor...ike-interactions

    Ответить

    • rotor, 20.05.2010 в 12:18

      Да, спасибо. Примеры вполне попадают в формат статьи.

      Ответить

  2. Matt, 25.05.2010 в 3:59

    Очень эффектно, ничего не скажешь! Хорошо, что теперь не надо будет JS изучать дополнительно ))

    Ответить

  3. Ivan, 02.07.2010 в 3:13

    Красиво, конечно. Но вот вопросик) Не сильно ли это сайт загружает?

    Ответить

  4. authris, 09.07.2010 в 11:40

    Мда, очень красиво, но грузить по-моему будет не по-детски...((:(

    Ответить

  5. Harchenko, 17.07.2010 в 15:02

    К jQuery привык больше...

    Ответить

  6. Брянск Веб, 13.08.2010 в 9:32

    Очень понравился пример фотогалереи. Надо будет заюзать где-нибудь у себя.

    Ответить

  7. Миша, 18.08.2010 в 11:42

    Классная фото галерея очень понравилась) Попробую себе ее поставить.

    Ответить

  8. Junglers, 25.08.2010 в 8:03

    Красиво) Это было последней каплей для того чтобы заставить себя уже выучить css))

    Ответить

  9. fender, 26.08.2010 в 22:46

    CSS открывает новые горизонты, что тут еще скажешь. Красиво и оригинально. Надо будет обязательно попробовать.

    Ответить

  10. enic, 23.12.2010 в 14:37

    CSS 3 стремится к облегчению верстки очень что не может не радовать

    Ответить

  11. Игроман, 03.05.2011 в 16:57

    Наконец-то новые технологии решают простые задачки для сайтов. Игра: как сделать красивый сайт и меньше скрипта скоро закончится. CSS решит многие проблемы.

    Ответить

  12. Геннадий, 09.08.2012 в 11:12

    Но ведь всё это свёрстано для недобраузеров на вебките. Авторам было лень продублировать стили без префикса -webkit- , а жаль.

    Ответить

Есть что сказать?