Пример:
Текст на фоне
HTML:
1 2 3 4 |
<div id="bg-canvas"> <canvas id="canvas"></canvas> <div id="text-canvas">Текст на фоне</div> </div> |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#bg-canvas { position: relative; overflow: hidden; background-size: cover; background-position: center center; background-image: url('background.jpg'); box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); } #bg-canvas #canvas { width: 100%; height: 600px; } #bg-canvas #text-canvas { position: absolute; top: 0; color: #FFF; font-size: 30px; padding: 30px 40px; font-family: 'Roboto', sans-serif; } |
JS:
Подключаем скрипт, в который входят необходимые библиотеки и сама анимация.
Цвета:
ctx.strokeStyle = 'rgba(156,217,249,'+ p.active+')';
в функции drawLines
- цвет линий
ctx.fillStyle = 'rgba(133, 245, 246,'+ _this.active+')'
в функции Circle
- цвет точек
Найдено на codepen.io у пользователя Marco Guglielmelli
Фотография: geralt
Не работает. И по типу такой же только постоянное самодвижение точек с этого сайта тоже не работает. А остальные работают, а хочется анимированные точки такие. В чем проблема? Что там с кодами у этих анимаций?
Все понятно. Все понятно. Я косячник, разобрался.
А где настройку цветов писать и как?
в JS, который подключается, найдите там поиском.
Добрый день помогите не могу встроить его в блок с текстом, либо его видно или текст а как его встроить?? что бы не перекрывал
Добавил пример