Css-анимация: пример-игрушка

10 марта 2015. Рубрики: Рабочие заметки; автор — Юлия Панина aka Княгиня.

Блог выводится из летаргического сна. Насколько успешно — увидим.

Вниманию публики предлагается небольшая игрушка на css: демонстрация возможностей свойств transform и transition. «Каруселька» сделана на чистом css, без единого скрипта и без единой картинки; если бы она ещё запоминала положение стрелки, её можно было бы назвать «Лото» или «Рулетка», но такое без скрипта никак.

Примечание: каруселька работает в ИЕ, начиная с 10. В старых версиях ИЕ такое сделать невозможно.

  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

Кое-какие оргвыводы из работы с этой каруселькой.

  • Можно делать анимацию на чистом css или с минимальным использованием джаваскрипта. Css-анимация меньше тормозит браузер, чем скриптовая, однако не свободна от глюков рендеринга (можно наблюдать на глубоко перегруженном браузере).
  • Однако у css есть проблемы с пониманием переключения того или иного состояния, особенно если происходит два или более переключения одновременно. В моём примере я постаралась заблокировать случаи, рождающие такие баги, но если мне придётся делать подобную работу на заказ, я не стану бороться за идейную чистоту и использую сочетание css+javascript.

При всё при том, эта каруселька — не более чем игрушка, практического применения ей пока нет. Может, кто-нибудь знает реальный практический случай, где такая игрушка годится в дело?

Отзывы (41) на «Css-анимация: пример-игрушка»
  1. Константин (1 комментарий)

    Зашёл случайно на Ваш сайт, зацепился. Приятно читать увлечённого специалиста. Подписался в твиттере.

    Ответить на этот комментарий
  2. Наталья (5 комментариев)

    Очень хорошо, что возвращаетесь. *IN LOVE* А то я уже вас потеряла. Тут столько «вкусного»! Мне это всё ещё изучать и изучать, но и свеженького материальчика тоже хочется. :-* *BRAVO*

    Ответить на этот комментарий
    • Княгиня (650 комментариев)

      Трудно мне со свеженьким материалом: моё вечное ощущение — всё уже написано до нас. Но я всё-таки решила изыскивать такое, что можно написать заново.

      Ответить на этот комментарий
  3. Alisa (2 комментария)

    интересно
    И хорошо что движение какое-то появилось, мы вас ждали)

    Ответить на этот комментарий
  4. Вячеслав (1 комментарий)

    Классная каруселька. На счет практического применения — можно гипнотизировать посетителя сайта. Публиковать всякие залипательные анимации. Посетитель дольше втыкает в картинку, а следовательно проводит на сайте больше времени. А какая польза от того, что он проводит на сайте больше времени… а это науке, пока неизвестно ©

    Ответить на этот комментарий
  5. Дмитрий (1 комментарий)

    Данную карусель можно использовать, как дополнительное меню для прокрутки особо важных тем, скорость прокрутки при этом желательно уменьшить :-D

    Ответить на этот комментарий
  6. Макс (1 комментарий)

    %) Я даже не догадываюсь как на КСС такое создать. Вы реально крутой верстальщик.

    Ответить на этот комментарий
  7. Елена (2 комментария)

    Класная каруселька, действительно можно было бы как прокрутка тем,только я запустить ее запустила а остановить пи наведении мыши… такое можно реализовать без скрипта?

    Ответить на этот комментарий
    • stin (1 комментарий)

      Мне карусель тоже понравилась. Сразу в мыслях прокручивается, как бы ее приспособить на свой сайт. Кстати, очень хорошая штука в качестве визуального генератора случайных чисел или выбора темы для просмотра в случайном порядке. Словом, варианты есть, нужно еще подумать ;)

      Ответить на этот комментарий

Есть что сказать? Не молчим!

Используйте теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" code=""> <ul> <li> <ol> .

Комментарии короче 200 символов публикуются без активной ссылки. Пробелы не учитываются.

Ссылки с комментариев dofollow. Ознакомьтесь, пожалуйста, с правилами dofollow-комментирования. Кто не читает, тот сам себе враг.