Медведь, выключающий лампочку

Сцена реализована на библиотеке GSAP и может использоваться, например, для оформления ошибки 404 .

Автор сцены: Jhey Tompkins

Пример на codepen

Отличие от оригинальной версии:
  • Сцена встроена в контейнер и отвязана от размера браузера. Для изменения масштаба нужно поменять значение font-size: 6em в классе .scene
  • Удален премиальный плагин MorphSVGPlugin3

Пример:

Включите несколько раз лампочку, потянув за шнур

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

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

  • Станислав:

    Здравствуйте! Как быть, если два js подключённых через footer конфликтую друг с другом? Это происходит с несколькими фишками интересными. Они отключают действия как мишки, так и вообще действия, той же верёвочки. Выход один, это отключить менее понравившееся ?

    Ответить
  • Tom:

    Подскажите пожалуйста как его установить на сайт или можно просто в файлах?!

    Ответить
    • Alexander:

      Последовательно по описанию.
      Если что то не получается, мне нужно результат видеть.

      Ответить
      • Tom:

        На)) ссылка ничего не получилось, сначала в отдельные файлы клал совсем ужс а потом в один и вот. Это проверочный домен, не сайт. Может датите готовый результат с ссылкой на файлы!

        Ответить
        • Alexander:

          А где библиотека GSAP и Draggable ?
          Выше есть пример на codepen, там можно скачать и тестировать.

          Ответить
  • Станислав:

    Добавил font-size: 100px; иначе мишка был очень маленький. Спасибо вам за труды!
    .bear {
    position: absolute;
    font-size: 100px;
    top: 10%;
    width: var(—size);
    }

    Ответить
  • Андрей:

    Привет.
    Интересная тема 🙂 можно использовать для 404 страницы.
    Конверсия у нее вырастит в разы ))))

    Ответить