Css-анимация: пример-игрушка (страница комментариев 2)

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

Карусель на css

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

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

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

43 комментария на «Css-анимация: пример-игрушка»
  1. proklub os (2 комментария)

    Колесо удачи — в коммерческих сайтах для того чтоб получить скидочку=) где-то видел такое, там как в игровых автоматах выпадает число — % скидки
    правда все равно с JS придется работать……….
    из другого практического применения — пока ничего на ум не приходит.

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

      Ну да, в том-то и собака порылась, что для запоминалки или чего-то ещё практического без js никак.

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

    Можно как-то для менюшки сайта приспособить, но пока не понятно как. Не знал что такое возможно на css, там же нет динамики, циклов, только свойства. Можете выложить код?

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

      Код, в сущности, можно взять из кода страницы. Может, чуть позже сделаю отдельным пакетом.

      Ответить на этот комментарий
  3. Адвокат (1 комментарий)

    Здорово, что css идёт на опережение. Кто знает, может в скором времени от java откажемся вовсе. Единственное пока жалко, что большинство подобных барабанов «Поле чудес» кроме, как для личного сайта Якубовича и разнообразных лотерей вряд ли пригодятся на практике. Логотип цветастый может и получится сделать с прокруткой, но это может только раздражать посетителей сайта.

    Ответить на этот комментарий
  4. Сергей (1 комментарий)

    С возвращением! Каруселька на ксс — это действительно круто, минут 10 залипал, вроде нечего интересного в ней нет, но почему то зацепило внимание. Блог ваш действительно очень интересный и раз вы решили продолжить его вести, то я остаюсь, очень хорошо пишите. =)

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

    офигеть, чистый CSS. отстал от жизни я, однако. пойду копать transform и transition, спасибо за наводку.

    Ответить на этот комментарий
  6. Глазурь (2 комментария)

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

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

      С фризами было бы вращение. А здесь для доработки можно добавить другие фишки, с вращением не связанные.

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

    Интересно зачем эта каруселька в практическом использовании :)
    Обилие интересных идей на вашем сайте меня поражает!

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

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

Используйте теги: <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-комментирования. Кто не читает, тот сам себе враг.


shopproxy.net