Можно ли заменить canvas в html5?

Question

[TostMaria]

Всем привет!
Я нашла достаточно красивый эффект, реализованный в html-5.
Захотелось, естественно, добавить такую красоту на сайт. Но в коде столкнулась с таким понятием, как canvas. Т.е. холст, на котором и отрисовывается красивый эффект (поднимающиеся круги).
Но мне бы хотелось, чтобы эти кружочки поднимались не по canvas'y, а по всему моему сайту.
Вопрос - можно ли заменить(или удалить))) canvas в html5, сохранив эффект?
Или как-то привязать canvas к всему содержимому сайта, или еще что-то придумать?

Update: tympanus.net/Development/AnimatedHeaderBackgrounds...
вот сам эффект

Answer 1

[Aleksandr Shpak]

Только если задвинуть канвас за (или перед) текстом посредством сочетаний
position: relative;
и
position: absolute;
Пример: jsfiddle
ps: выводя канву перед текстом, как следствие, лишимся например возможности его выделять.

Comments

[TostMaria]

Очень интересно! Спасибо большое!

Answer 2

[lesuk]

нет.

Comments

[TostMaria]

А какой-нибудь прозрачный canvas поверх всего сайта - тоже нет? В чем тогда смысл эффекта - просто пузырьки на какой-то картинке-фоне?
Там в связке были еще эффекты с canvas, их получалось прикручивать к содержимому сайта. Правда, они были под элементами.
Может быть, можно как-то этот эффект сделать на заднем фоне сайта?

Answer 3

[hjk]

Заменить или удалить канвас нельзя — в нём рисуются эти «кружочки». Если надо, чтобы они «поднимались выше», для этого придётся изменить код, который их рисует. Канвас, судя по коду, уже и так растянут на весь экран, поэтому надо поиграться с настройками в файле demo-2.js. В 84 строке я заменил _this.alpha -= 0.0005; на _this.alpha -= 0.00005;, тем самым немного «продлил» жизнь кружочков. Нужно было сделать это?

UPD: Хм, мне кажется, вы имели в виду нечто другое. Тогда решением будет сделать канвас position: fixed и растянуть на весь экран, то есть при скролле он будет везде на виду. Я как-то с формулировкой вопроса не сразу разобрался.

Comments

[TostMaria]

Да, другое имелось в виду.

Answer 4

[yuchiko]

habrahabr.ru/company/microsoft/blog/110237
В этом примере:

Для отрисовки снежинок мы создатим холст (Canvas) на весь экран:

var canvas = document.createElement('canvas'); 
canvas.style.position = 'fixed'; 
canvas.style.top = '0px'; 
canvas.style.left = '0px'; 
canvas.style.zIndex = '-10'; 
canvas.width = document.body.offsetWidth; 
canvas.height = window.innerHeight; 

document.body.insertBefore(canvas, document.body.firstChild);

Comments

[TostMaria]

Спасибо, попробую.