Блог выводится из летаргического сна. Насколько успешно — увидим.
Вниманию публики предлагается небольшая игрушка на css: демонстрация возможностей свойств transform и transition. «Каруселька» сделана на чистом css, без единого скрипта и без единой картинки; если бы она ещё запоминала положение стрелки, её можно было бы назвать «Лото» или «Рулетка», но такое без скрипта никак.
Примечание: каруселька работает в ИЕ, начиная с 10. В старых версиях ИЕ такое сделать невозможно.
- 0
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
Кое-какие оргвыводы из работы с этой каруселькой.
- Можно делать анимацию на чистом css или с минимальным использованием джаваскрипта. Css-анимация меньше тормозит браузер, чем скриптовая, однако не свободна от глюков рендеринга (можно наблюдать на глубоко перегруженном браузере).
- Однако у css есть проблемы с пониманием переключения того или иного состояния, особенно если происходит два или более переключения одновременно. В моём примере я постаралась заблокировать случаи, рождающие такие баги, но если мне придётся делать подобную работу на заказ, я не стану бороться за идейную чистоту и использую сочетание css+javascript.
При всё при том, эта каруселька — не более чем игрушка, практического применения ей пока нет. Может, кто-нибудь знает реальный практический случай, где такая игрушка годится в дело?
43 комментария на «Css-анимация: пример-игрушка»
Константин (1 комментарий)
Зашёл случайно на Ваш сайт, зацепился. Приятно читать увлечённого специалиста. Подписался в твиттере.
Наталья (5 комментариев)
Очень хорошо, что возвращаетесь.
А то я уже вас потеряла. Тут столько «вкусного»! Мне это всё ещё изучать и изучать, но и свеженького материальчика тоже хочется. 
Княгиня (660 комментариев)
Трудно мне со свеженьким материалом: моё вечное ощущение — всё уже написано до нас. Но я всё-таки решила изыскивать такое, что можно написать заново.
Alisa (2 комментария)
интересно
И хорошо что движение какое-то появилось, мы вас ждали)
Вячеслав (1 комментарий)
Классная каруселька. На счет практического применения — можно гипнотизировать посетителя сайта. Публиковать всякие залипательные анимации. Посетитель дольше втыкает в картинку, а следовательно проводит на сайте больше времени. А какая польза от того, что он проводит на сайте больше времени… а это науке, пока неизвестно ©
Дмитрий (1 комментарий)
Данную карусель можно использовать, как дополнительное меню для прокрутки особо важных тем, скорость прокрутки при этом желательно уменьшить
Макс (1 комментарий)
Елена (2 комментария)
Класная каруселька, действительно можно было бы как прокрутка тем,только я запустить ее запустила а остановить пи наведении мыши… такое можно реализовать без скрипта?
stin (1 комментарий)
Мне карусель тоже понравилась. Сразу в мыслях прокручивается, как бы ее приспособить на свой сайт. Кстати, очень хорошая штука в качестве визуального генератора случайных чисел или выбора темы для просмотра в случайном порядке. Словом, варианты есть, нужно еще подумать