Анимация html + js. Как вставить этот код на свой сайт?

Question

[Andrey Dontsov]

Добрый день
Сделал простую анимацию (html + js) в adobe flash, пример на codepen - codepen.io/Andrey-m/pen/MaKbYd
Вопрос
Как добавить ее на свой сайт?
Очевидно подключить те же скрипты и ту же разметку html
Проблема в том, что onload="init();" задан в теге body.
1 - Пытаюсь вынести в отдельный div - не работает
2 - Пытаюсь добавить onload="init();" в тег body у себя на сайте - не работает

Подскажите в чем причина, как все-таки добавить этот блок на свой сайт.
Спасибо

Comments

[Andrey Dontsov]

Оппа... яндекс карта ломает код, т.е. не отображается анимация из-за яндекс карты.
Сама карта отображается, но в консоли - это - Uncaught TypeError: ymaps.Map is not a function
Можно ли ее как-то экранировать?

Answer 1

[Денис Инешин]

Причем тут флеш? На выходе то анимация на Canvas.
Вы наверное забыли вставить тег канвас себе на страницу и подключить все эти скрипты из head.

Comments

[Andrey Dontsov]

Не, имел ввиду, что сделано все в программе adobe flash pro.
Не забыл, анимация не отображалась из-за яндекс карты, убрал ее - анимация появилась, но..
Остались две проблемы:
1- как теперь быть с картой
2 - в хроме летит блок со свойством background-attachment: fixed, фоновая картинка глючит.
Только в хроме! во всех остальных браузерах все отлично, намучался с этим свойством и вот опять((

[Aleksandr]

AndreyBLG: А почему нельзя сделать это на css3?

[Andrey Dontsov]

Александр Котов: боюсь не справиться, не достаточно опыта, насочиняю костылей, убью сутки и это не будет работать, можете хотя бы несколькими словами описать порядок, направить.
Представляю это так:
1. делаю блок 780*80 px position relative
2. расставляю элементы с помощью top, left, right и т.д.
3. двигаю их с помощью keyframes.
Как сделать этот блок адаптивным? Например при уменьшении ширины окна, элементы, которые расположены с помощью top, left и т.д. не развалятся?
Как бы вы подошли к этой задаче? Хотя бы первые шаги, фундамент правильно пути
Спасибо

[Andrey Dontsov]

Александр Котов: вот что получилось - codepen.io/Andrey-m/pen/QjypPV?editors=110
Можете указать на ошибки? Допустим полоса загрузки у меня в px, при изменении размеров окна все рушится. Ставлю % - не выходит то, что нужно. Спасибо

[Aleksandr]

AndreyBLG: Попробуйте использовать Flexbox