Блог выводится из летаргического сна. Насколько успешно — увидим.
Вниманию публики предлагается небольшая игрушка на css: демонстрация возможностей свойств transform и transition. «Каруселька» сделана на чистом css, без единого скрипта и без единой картинки; если бы она ещё запоминала положение стрелки, её можно было бы назвать «Лото» или «Рулетка», но такое без скрипта никак.
Примечание: каруселька работает в ИЕ, начиная с 10. В старых версиях ИЕ такое сделать невозможно. Читать полностью »
43 комментария на «Css-анимация: пример-игрушка»
proklub os (2 комментария)
Колесо удачи — в коммерческих сайтах для того чтоб получить скидочку=) где-то видел такое, там как в игровых автоматах выпадает число — % скидки
правда все равно с JS придется работать……….
из другого практического применения — пока ничего на ум не приходит.
Княгиня (660 комментариев)
Ну да, в том-то и собака порылась, что для запоминалки или чего-то ещё практического без js никак.
Антон (1 комментарий)
Можно как-то для менюшки сайта приспособить, но пока не понятно как. Не знал что такое возможно на css, там же нет динамики, циклов, только свойства. Можете выложить код?
Княгиня (660 комментариев)
Код, в сущности, можно взять из кода страницы. Может, чуть позже сделаю отдельным пакетом.
Адвокат (1 комментарий)
Здорово, что css идёт на опережение. Кто знает, может в скором времени от java откажемся вовсе. Единственное пока жалко, что большинство подобных барабанов «Поле чудес» кроме, как для личного сайта Якубовича и разнообразных лотерей вряд ли пригодятся на практике. Логотип цветастый может и получится сделать с прокруткой, но это может только раздражать посетителей сайта.
Сергей (1 комментарий)
С возвращением! Каруселька на ксс — это действительно круто, минут 10 залипал, вроде нечего интересного в ней нет, но почему то зацепило внимание. Блог ваш действительно очень интересный и раз вы решили продолжить его вести, то я остаюсь, очень хорошо пишите.
Posho (1 комментарий)
офигеть, чистый CSS. отстал от жизни я, однако. пойду копать transform и transition, спасибо за наводку.
Глазурь (2 комментария)
Неплохо получилось, кстати. Совершенно не грузит сайт (проверял скорость загрузки страницы с включенным и выключенным колесиком), и при этом выглядит красиво. Ну доработать конечно можно и нужно чисто для визуализации, но на джаваскрипте это же получилось бы с жуткими фризами.
Княгиня (660 комментариев)
С фризами было бы вращение. А здесь для доработки можно добавить другие фишки, с вращением не связанные.
Людмила (2 комментария)
Интересно зачем эта каруселька в практическом использовании
Обилие интересных идей на вашем сайте меня поражает!